Refactor GTM Architect to v2: Python-driven architecture, 9-phase process, new DB and Docker setup

2026-01-02 19:00:05 +00:00
parent d59888c889
commit 8439a7fb10
302 changed files with 68130 additions and 4782 deletions
--- a/k-pop-thumbnail-genie/components/StepIndicator.tsx
+++ b/k-pop-thumbnail-genie/components/StepIndicator.tsx
@@ -0,0 +1,53 @@
+
+import React from 'react';
+import { AppStep } from '../types';
+
+interface StepIndicatorProps {
+  currentStep: AppStep;
+}
+
+const steps = [
+  { id: AppStep.Upload, title: 'Upload' },
+  { id: AppStep.Segment, title: 'Segment Subjects'},
+  { id: AppStep.Prompt, title: 'Create Prompt' },
+  { id: AppStep.Result, title: 'Generate & Refine' },
+];
+
+const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep }) => {
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between md:justify-center">
+        {steps.map((step, index) => {
+          const isActive = currentStep === step.id;
+          const isCompleted = currentStep > step.id;
+
+          return (
+            <React.Fragment key={step.id}>
+              <div className="flex items-center flex-col sm:flex-row text-center">
+                <div
+                  className={`flex items-center justify-center w-10 h-10 rounded-full transition-all duration-300 ${
+                    isActive ? 'bg-purple-600 scale-110' : isCompleted ? 'bg-green-600' : 'bg-gray-700'
+                  }`}
+                >
+                  <span className={`font-bold ${isActive || isCompleted ? 'text-white' : 'text-gray-400'}`}>
+                    {isCompleted ? (
+                      <svg xmlns="http://www.w.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                    ) : step.id}
+                  </span>
+                </div>
+                <p className={`mt-2 sm:mt-0 sm:ml-3 font-semibold text-xs sm:text-sm ${isActive ? 'text-purple-300' : 'text-gray-500'}`}>{step.title}</p>
+              </div>
+              {index < steps.length - 1 && (
+                <div className={`flex-auto border-t-2 transition-colors duration-300 mx-2 sm:mx-4 w-4 sm:w-auto ${isCompleted ? 'border-green-600' : 'border-gray-700'}`}></div>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default StepIndicator;