Update app.py

app.py

@@ -50,21 +50,21 @@ def handle_csv_upload(file):
         df = pd.read_csv(file.name)
         required_columns = {'content_id', 'kkn_tags', 'image-link#1', 'image-link#2', 'image-link#3'}
         if not required_columns.issubset(df.columns):
-            return "Missing required columns in CSV.", None
-        return "CSV uploaded successfully.", df
+            return "❌ Missing required columns in CSV.", None
+        return "✅ CSV uploaded successfully.", df
     except Exception as e:
-        return f"CSV upload failed: {type(e).__name__} - {str(e)}", None
+        return f"❌ CSV upload failed: {type(e).__name__} - {str(e)}", None
 
 # Step 2: Validate content_id
 def validate_content_id(content_id, df):
     try:
         match = df[df['content_id'].astype(str) == content_id]
         if match.empty:
-            return "Content ID not found in CSV.", None
+            return "❌ Content ID not found in CSV.", None
         row = match.iloc[0]
-        return "Content ID found. Now paste HTML code.", row
+        return "✅ Content ID found. Now paste HTML code.", row
     except Exception as e:
-        return f"Error: {type(e).__name__} - {str(e)}", None
+        return f"❌ Error: {type(e).__name__} - {str(e)}", None
 
 # Step 3: Inject images
 def inject_and_display(html_code, row):
@@ -75,32 +75,32 @@ def inject_and_display(html_code, row):
             row['image-link#2'],
             row['image-link#3']
         )
-        return "Images injected successfully.", injected_html, row['kkn_tags']
+        return "✅ Images injected successfully.", injected_html, row['kkn_tags']
     except Exception as e:
-        return f"Injection failed: {type(e).__name__} - {str(e)}", "", ""
+        return f"❌ Injection failed: {type(e).__name__} - {str(e)}", "", ""
 
 # Build UI
-with gr.Blocks() as demo:
-    gr.Markdown("## Step-by-Step HTML Image Injector")
+with gr.Blocks(css="#inject-btn {background-color: #22c55e; color: white; font-weight: bold; border-radius: 8px;}") as demo:
+    gr.Markdown("## 🖼️ HTML Image Injector - Easy Steps")
 
     csv_state = gr.State()
     row_state = gr.State()
 
     with gr.Row():
-        csv_input = gr.File(label="Step 1: Upload CSV", file_types=[".csv"])
-        csv_status = gr.Textbox(label="Status", interactive=False)
+        csv_input = gr.File(label="📤 Step 1: Upload CSV", file_types=[".csv"])
+        csv_status = gr.Textbox(label="📋 Status", interactive=False)
 
     with gr.Row():
-        content_id_input = gr.Textbox(label="Step 2: Enter content_id")
-        content_status = gr.Textbox(label="Status", interactive=False)
+        content_id_input = gr.Textbox(label="🔍 Step 2: Enter content_id")
+        content_status = gr.Textbox(label="📋 Status", interactive=False)
 
     with gr.Row():
-        html_input = gr.Textbox(label="Step 3: Paste HTML here", lines=10)
-        html_status = gr.Textbox(label="Status", interactive=False)
+        html_input = gr.Textbox(label="🧾 Step 3: Paste HTML here", lines=10)
+        html_status = gr.Textbox(label="📋 Status", interactive=False)
 
-    submit_btn = gr.Button("Step 4: Inject Images")
-    output_html = gr.HTML(label="Injected HTML")
-    output_tags = gr.Textbox(label="Extracted kkn_tags")
+    submit_btn = gr.Button("✨ Step 4: Inject Images", elem_id="inject-btn")
+    output_html = gr.Textbox(label="🧾 Injected HTML (Raw Output)", lines=10, interactive=False)
+    output_tags = gr.Textbox(label="🏷️ Extracted kkn_tags", interactive=False)
 
     # Step 1 action
     csv_input.change(