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,7 +231,15 @@ def ragent_reasoning(prompt: str, history: list[dict], max_tokens: int = 1024, t
 # Gradio UI configuration
 
 DESCRIPTION = """
-# Agent Dino 🌠 """
+# 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.
+"""
 
 css = '''
 h1 {
@@ -239,6 +247,7 @@ h1 {
   display: block;
 }
 
+/* Additional styling can go here */
 #duplicate-button {
   margin: auto;
   color: #fff;
@@ -568,42 +577,99 @@ def generate(
             output_file = asyncio.run(text_to_speech(final_response, voice))
             yield gr.Audio(output_file, autoplay=True)
 
-# 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,
-)
+# ---------------------------
+# Gradio Interface Setup
+# ---------------------------
 
 # Ensure the static folder exists
 if not os.path.exists("static"):
     os.makedirs("static")
 
 from fastapi.staticfiles import StaticFiles
-demo.app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# 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")
 
 if __name__ == "__main__":
     demo.queue(max_size=20).launch(share=True)