Update app.py

app.py

@@ -7,11 +7,11 @@ from typing import List, Tuple
 # --- Basic Configuration ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s', handlers=[logging.StreamHandler()])
 
-# --- The Core Application Logic (Now serves both modes) ---
+# --- The Core Application Logic (Serves both modes) ---
 class HumanTouchApp:
     def __init__(self):
         self.client = self._initialize_groq_client()
-        self.model = "llama-3.3-70b-versatile"
+        self.model = "llama-3.1-70b-versatile"
         self.system_prompt_template = self._load_system_prompt()
 
     def _initialize_groq_client(self) -> Groq:
@@ -23,7 +23,7 @@ class HumanTouchApp:
         return Groq(api_key=api_key)
 
     def _load_system_prompt(self) -> str:
-        # This one prompt now powers both modes, using context to differentiate tasks.
+        # This one prompt powers both modes, using context to differentiate tasks.
         return """
         You are HumanTouch, an AI specializing in transforming text into emotionally resonant communication.
         Your output style is guided by two scores: Style (0=Logical, 100=Poetic) and Tone (0=Formal, 100=Passionate).
@@ -100,43 +100,79 @@ class HumanTouchApp:
 def create_interface():
     app = HumanTouchApp()
 
+    # This CSS combines the light, colorful aesthetic with the components of the tabbed interface.
     custom_css = """
-    #main_container { background: #111827; }
-    #header { text-align: center; margin: 20px auto; color: #E5E7EB; }
+    /* --- Main Background and Font --- */
+    body, #main_container {
+        background: linear-gradient(135deg, #f0f9ff, #fff0f5); /* Softer blue-to-pink gradient */
+        font-family: 'Arial', sans-serif;
+    }
+    /* --- Header Styling --- */
+    #header { text-align: center; margin: 2rem auto; color: #2D3748; }
     #header h1 { font-size: 2.5rem; font-weight: 600; }
-    #header p { font-size: 1.1rem; color: #9CA3AF; margin-bottom: 20px;}
-    .gradio-tabs { background-color: #1F2937; border-radius: 20px !important; border: 1px solid #374151; }
-    .tab-buttons button { background-color: #1F2937 !important; color: #9CA3AF !important; border-radius: 10px 10px 0 0 !important; }
-    .tab-buttons button.selected { background-color: #374151 !important; color: white !important; }
+    #header p { font-size: 1.1rem; color: #4A5568; margin-bottom: 2rem; }
+    
+    /* --- Tab Container (Frosted Glass Look) --- */
+    .gradio-tabs {
+        background: rgba(255, 255, 255, 0.8);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+        border-radius: 20px !important;
+        box-shadow: 0 8px 32px 0 rgba(100, 100, 135, 0.2);
+        padding: 1rem;
+    }
+    .tab-buttons button {
+        background-color: transparent !important; color: #4A5568 !important;
+        border: none !important; border-bottom: 2px solid transparent !important;
+        border-radius: 0 !important; font-size: 1.1rem;
+    }
+    .tab-buttons button.selected {
+        color: #3182CE !important;
+        border-bottom-color: #3182CE !important;
+    }
     
     /* --- Humanizer Tab Styles --- */
-    #humanizer_input, #humanizer_output { background-color: #374151; color: #F9FAFB; border: 1px solid #4B5563; border-radius: 15px !important; min-height: 50vh;}
-    #humanize_btn { background: #10B981; color: white; font-weight: bold; padding: 15px 0; font-size: 1.2rem; }
-
-    /* --- Canvas Tab Styles --- */
-    #symbiotic_canvas { background: #1F2937; border-radius: 20px; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.5); height: 65vh !important; border: 1px solid #374151; }
-    #symbiotic_canvas .user { background-color: transparent !important; color: #F9FAFB; border: 1px solid #4B5563; }
-    #symbiotic_canvas .bot { background-color: transparent !important; color: #A7F3D0; animation: bloom 0.7s ease-in-out; }
-    @keyframes bloom { 0% { opacity: 0; transform: translateY(10px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
-    #control_deck { background: #1F2937; padding: 20px; border-radius: 20px; border: 1px solid #374151; }
-    #chat_input textarea { background-color: #374151; color: #F9FAFB; border: 1px solid #4B5563; border-radius: 15px !important; }
+    #humanizer_input, #humanizer_output {
+        border: 2px solid #E2E8F0; border-radius: 12px; padding: 1rem;
+        background: white; transition: border-color 0.3s ease; min-height: 45vh;
+        color: #2D3748;
+    }
+    #humanizer_input:focus-within, #humanizer_output:focus-within { border-color: #3182CE; }
+    #humanize_btn {
+        background: linear-gradient(45deg, #ED64A6, #4299E1);
+        padding: 15px 24px; border-radius: 9999px; font-size: 1.2rem;
+        transition: all 0.3s ease;
+    }
+    #humanize_btn:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transform: translateY(-2px); }
+
+    /* --- Co-Creative Canvas Tab Styles --- */
+    #symbiotic_canvas {
+        background: white; border-radius: 12px; height: 60vh !important;
+        border: 2px solid #E2E8F0;
+    }
+    #symbiotic_canvas .user { background-color: #F7FAFC !important; color: #2D3748; border-radius: 15px; }
+    #symbiotic_canvas .bot { background-color: #E6FFFA !important; color: #2C7A7B; border-radius: 15px; animation: bloom 0.7s ease-in-out; }
+    @keyframes bloom { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
+    
+    #chat_input textarea { border-radius: 9999px !important; border: 2px solid #E2E8F0; }
+    #compose_btn { background: #4299E1; }
     """
 
-    with gr.Blocks(css=custom_css, theme=gr.themes.Base(), title="HumanTouch") as interface:
+    with gr.Blocks(css=custom_css, title="HumanTouch") as interface:
         with gr.Column(elem_id="main_container"):
             with gr.Row(elem_id="header"):
-                gr.Markdown("<h1>✨ HumanTouch</h1><p>Transform robotic text or co-create with a symbiotic AI partner. Choose your mode below.</p>")
+                gr.Markdown("<h1>🧙‍♂️ HumanTouch</h1><p>Breathe life into AI text or co-create with a dynamic AI partner.</p>")
 
             with gr.Tabs() as tabs:
                 # --- TAB 1: The Humanizer ---
                 with gr.Tab("Humanizer", id="humanizer_tab"):
-                    with gr.Column():
-                        gr.Markdown("### 🤖➡️🧑 Humanize AI Text\n<p>Paste your text, adjust the resonance, and see it transformed.</p>")
+                    with gr.Column(variant="panel"):
+                        gr.Markdown("### Transform Existing AI Text")
                         with gr.Row():
-                            with gr.Column(scale=2):
-                                input_text_humanizer = gr.Textbox(label="Paste AI Text Here", lines=20, elem_id="humanizer_input")
-                            with gr.Column(scale=2):
-                                output_text_humanizer = gr.Textbox(label="Humanized Result", lines=20, interactive=False, elem_id="humanizer_output")
+                            with gr.Column(scale=1):
+                                input_text_humanizer = gr.Textbox(label="Paste AI Text Here", lines=15, elem_id="humanizer_input")
+                            with gr.Column(scale=1):
+                                output_text_humanizer = gr.Textbox(label="Humanized Result", lines=15, interactive=False, elem_id="humanizer_output")
                         with gr.Row():
                             with gr.Column(scale=1):
                                 style_slider_h = gr.Slider(0, 100, 50, label="Style (Logical <-> Poetic)")
@@ -146,7 +182,7 @@ def create_interface():
                         gr.Examples(
                             [["The system's analysis concluded that the optimal parameters were achieved through iterative processing."],
                              ["Our team will action the deliverables post-haste to synergize our market position."]],
-                            inputs=[input_text_humanizer], label="Try an Example"
+                            inputs=[input_text_humanizer], label="Try a Humanizer Example"
                         )
 
                 # --- TAB 2: The Co-Creative Canvas ---
@@ -154,10 +190,10 @@ def create_interface():
                     with gr.Row(equal_height=False):
                         with gr.Column(scale=3):
                             chatbot = gr.Chatbot([], label="Symbiotic Canvas", elem_id="symbiotic_canvas", bubble_full_width=True, avatar_images=(None, "https://i.imgur.com/Q6Zz3Jz.png"))
-                            with gr.Row(elem_id="chat_input_row"):
-                                chat_input = gr.Textbox(placeholder="Start a thought and press Enter...", show_label=False, container=False, scale=4)
-                                clear_btn = gr.Button("New Canvas", scale=1)
-                        with gr.Column(scale=1, elem_id="control_deck"):
+                            with gr.Row():
+                                chat_input = gr.Textbox(placeholder="Start a thought...", show_label=False, container=False, scale=4)
+                                compose_btn = gr.Button("Compose ✨", variant="primary", scale=1, elem_id="compose_btn")
+                        with gr.Column(scale=1, variant="panel"):
                             gr.Markdown("### Resonance Controls")
                             style_slider_c = gr.Slider(0, 100, 50, label="Style", info="Logical <-> Poetic")
                             tone_slider_c = gr.Slider(0, 100, 50, label="Tone", info="Formal <-> Passionate")
@@ -167,26 +203,15 @@ def create_interface():
                             )
 
         # Event Handling Logic
-        # Humanizer Tab
-        humanize_button.click(
-            app.humanize_block_text,
-            [input_text_humanizer, style_slider_h, tone_slider_h],
-            [output_text_humanizer]
-        )
-
-        # Canvas Tab
-        chat_input.submit(
-            app.generate_co_creation,
-            [chat_input, chatbot, style_slider_c, tone_slider_c],
-            [chatbot, chat_input]
-        )
-        clear_btn.click(lambda: ([], ""), [], [chatbot, chat_input])
+        humanize_button.click(app.humanize_block_text, [input_text_humanizer, style_slider_h, tone_slider_h], [output_text_humanizer])
+        compose_btn.click(app.generate_co_creation, [chat_input, chatbot, style_slider_c, tone_slider_c], [chatbot, chat_input])
+        chat_input.submit(app.generate_co_creation, [chat_input, chatbot, style_slider_c, tone_slider_c], [chatbot, chat_input])
 
     return interface
 
 
 if __name__ == "__main__":
-    logging.info("Launching HumanTouch App with Blended UI...")
+    logging.info("Launching HumanTouch App with Blended UI and Light Theme...")
     try:
         interface = create_interface()
         interface.launch(debug=True)