Update app.py

app.py

@@ -198,7 +198,7 @@ SYSTEM_PROMPT = """
         "2. **Code**: Write Python code to implement your solution.\n"
         "3. **Observation**: Analyze the output of the code and summarize the results.\n"
         "4. **Final Answer**: Provide a concise conclusion or final result.\n\n"
-        f"Task: {{task}}"
+        f"Task: {task}"
 
 """
 
@@ -231,15 +231,7 @@ def ragent_reasoning(prompt: str, history: list[dict], max_tokens: int = 1024, t
 # Gradio UI configuration
 
 DESCRIPTION = """
-# Agent Dino 🌠
-
-This chat interface supports multiple commands:
-- `@tts1` or `@tts2`: Triggers text-to-speech.
-- `@image`: Generates an image using Stable Diffusion XL.
-- `@3d`: Generates a 3D model using the ShapE pipeline.
-- `@web`: Performs a web search or visits a webpage.
-- `@rAgent`: Initiates a reasoning chain using Llama mode OpenAI.
-"""
+# Agent Dino 🌠 """
 
 css = '''
 h1 {
@@ -247,7 +239,6 @@ h1 {
   display: block;
 }
 
-/* Additional styling can go here */
 #duplicate-button {
   margin: auto;
   color: #fff;
@@ -577,99 +568,42 @@ def generate(
             output_file = asyncio.run(text_to_speech(final_response, voice))
             yield gr.Audio(output_file, autoplay=True)
 
-# ---------------------------
-# Gradio Interface Setup
-# ---------------------------
+# Gradio Chat Interface Setup and Launch
+
+demo = gr.ChatInterface(
+    fn=generate,
+    additional_inputs=[
+        gr.Slider(label="Max new tokens", minimum=1, maximum=MAX_MAX_NEW_TOKENS, step=1, value=DEFAULT_MAX_NEW_TOKENS),
+        gr.Slider(label="Temperature", minimum=0.1, maximum=4.0, step=0.1, value=0.6),
+        gr.Slider(label="Top-p (nucleus sampling)", minimum=0.05, maximum=1.0, step=0.05, value=0.9),
+        gr.Slider(label="Top-k", minimum=1, maximum=1000, step=1, value=50),
+        gr.Slider(label="Repetition penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.2),
+    ],
+    examples=[
+        ["@tts2 What causes rainbows to form?"],
+        ["@3d A birthday cupcake with cherry"],
+        [{"text": "summarize the letter", "files": ["examples/1.png"]}],
+        ["@image Chocolate dripping from a donut against a yellow background, in the style of brocore, hyper-realistic"],
+        ["@rAgent Explain how a binary search algorithm works."],
+        ["@web latest breakthroughs in renewable energy"],
+
+    ],
+    cache_examples=False,
+    type="messages",
+    description=DESCRIPTION,
+    css=css,
+    fill_height=True,
+    textbox=gr.MultimodalTextbox(label="Query Input", file_types=["image"], file_count="multiple"),
+    stop_btn="Stop Generation",
+    multimodal=True,
+)
 
 # Ensure the static folder exists
 if not os.path.exists("static"):
     os.makedirs("static")
 
 from fastapi.staticfiles import StaticFiles
-
-# Wrap the app in a Blocks layout to include an extra slider bar (via HTML/CSS)
-with gr.Blocks(css=css) as demo:
-    gr.Markdown("### About Space\nThis chat interface supports multiple commands:\n- `@tts1` or `@tts2`: Triggers text-to-speech.\n- `@image`: Generates an image using Stable Diffusion XL.\n- `@3d`: Generates a 3D model using the ShapE pipeline.\n- `@web`: Performs a web search or visits a webpage.\n- `@rAgent`: Initiates a reasoning chain using Llama mode OpenAI.\n")
-    
-    # Add a custom slider bar via HTML/CSS/JS
-    gr.HTML("""
-    <div class="slider-container">
-      <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
-      <p>Slider Value: <span id="sliderValue">50</span></p>
-    </div>
-    <style>
-      .slider-container {
-        width: 80%;
-        margin: auto;
-        text-align: center;
-        padding: 10px 0;
-      }
-      .slider {
-        -webkit-appearance: none;
-        width: 100%;
-        height: 15px;
-        background: #d3d3d3;
-        outline: none;
-        opacity: 0.7;
-        transition: opacity .2s;
-      }
-      .slider:hover {
-        opacity: 1;
-      }
-      .slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 25px;
-        height: 25px;
-        background: #4CAF50;
-        cursor: pointer;
-      }
-      .slider::-moz-range-thumb {
-        width: 25px;
-        height: 25px;
-        background: #4CAF50;
-        cursor: pointer;
-      }
-    </style>
-    <script>
-      const slider = document.getElementById("myRange");
-      const sliderValue = document.getElementById("sliderValue");
-      slider.oninput = function() {
-        sliderValue.textContent = this.value;
-      }
-    </script>
-    """)
-    
-    # Add the ChatInterface (with additional slider controls for generation parameters)
-    gr.ChatInterface(
-        fn=generate,
-        additional_inputs=[
-            gr.Slider(label="Max new tokens", minimum=1, maximum=MAX_MAX_NEW_TOKENS, step=1, value=DEFAULT_MAX_NEW_TOKENS),
-            gr.Slider(label="Temperature", minimum=0.1, maximum=4.0, step=0.1, value=0.6),
-            gr.Slider(label="Top-p (nucleus sampling)", minimum=0.05, maximum=1.0, step=0.05, value=0.9),
-            gr.Slider(label="Top-k", minimum=1, maximum=1000, step=1, value=50),
-            gr.Slider(label="Repetition penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.2),
-        ],
-        examples=[
-            ["@tts2 What causes rainbows to form?"],
-            ["@3d A birthday cupcake with cherry"],
-            [{"text": "summarize the letter", "files": ["examples/1.png"]}],
-            ["@image Chocolate dripping from a donut against a yellow background, in the style of brocore, hyper-realistic"],
-            ["@rAgent Explain how a binary search algorithm works."],
-            ["@web latest breakthroughs in renewable energy"],
-        ],
-        cache_examples=False,
-        type="messages",
-        description=DESCRIPTION,
-        css=css,
-        fill_height=True,
-        textbox=gr.MultimodalTextbox(label="Query Input", file_types=["image"], file_count="multiple"),
-        stop_btn="Stop Generation",
-        multimodal=True,
-    )
-
-    # Mount the static folder so generated files can be served
-    demo.app.mount("/static", StaticFiles(directory="static"), name="static")
+demo.app.mount("/static", StaticFiles(directory="static"), name="static")
 
 if __name__ == "__main__":
     demo.queue(max_size=20).launch(share=True)