Update app.py

app.py

@@ -25,7 +25,6 @@ def generate_text(input_text, selected_model, history):
     if history is None:
         history = ""  # Initialize history if it's None
     
-    # Call the API to get the model response
     response = requests.post(
         url="https://openrouter.ai/api/v1/chat/completions",
         headers={
@@ -46,34 +45,45 @@ def generate_text(input_text, selected_model, history):
     
     # Handle errors
     if response.status_code != 200:
-        return f"Error: {response.status_code}, {response.text}", history, history
+        return f"Error: {response.status_code}, {response.text}", history
     
-    # Parse and generate the response
+    # Parse and return the content of the response
     try:
         response_json = response.json()
         generated_response = response_json.get("choices", [{}])[0].get("message", {}).get("content", "No content returned.")
     except json.JSONDecodeError:
         generated_response = "Error: Unable to parse response."
 
-    # Append the new conversation to the history
-    history += f"User: {input_text}\nModel: {selected_model}\nResponse: {generated_response}\n\n"
+    # Append the new interaction to the history with model name
+    history += f"Model: {selected_model}\nUser: {input_text}\nResponse: {generated_response}\n\n"
     
-    return generated_response, history, history  # Return three values
+    return generated_response, history, history
 
-# Create Gradio interface with a dropdown for model selection
-iface = gr.Interface(
-    fn=generate_text,
-    inputs=[
-        gr.Textbox(lines=2, label="Input Text", placeholder="Enter your query here"),
-        gr.Dropdown(choices=MODEL_OPTIONS, label="Select Model", value=MODEL_OPTIONS[0]),
-        gr.State()  # This is where we maintain the history state (input)
-    ],
-    outputs=[
-        gr.Textbox(label="Response", placeholder="Response will be shown here"),
-        gr.Textbox(label="History", placeholder="Interaction history will be shown here", lines=10, interactive=False),
-        gr.State()  # History needs to be output as well
-    ],
-    title="Chat with OpenRouter Models"
-)
+# Define the Gradio layout using Blocks
+with gr.Blocks() as iface:
+    # Inject custom CSS using gr.HTML()
+    gr.HTML("""
+        <style>
+            #output-response, #output-history {
+                height: 300px;
+                overflow: auto;
+                border: 1px solid #ddd;
+                padding: 10px;
+            }
+        </style>
+    """)
 
+    input_text = gr.Textbox(lines=2, label="Input Text", placeholder="Enter your query here")
+    selected_model = gr.Dropdown(choices=MODEL_OPTIONS, label="Select Model", value=MODEL_OPTIONS[0])
+
+    # Generate button positioned below the dropdown
+    generate_button = gr.Button("Generate")
+
+    output_response = gr.Textbox(label="Response", placeholder="Response will be shown here")
+    output_history = gr.Textbox(label="History", placeholder="Interaction history will be shown here", lines=10, interactive=False)
+
+    # Trigger the function when the user clicks the "Generate" button
+    generate_button.click(generate_text, inputs=[input_text, selected_model, gr.State()], outputs=[output_response, output_history, gr.State()])
+
+# Launch the interface
 iface.launch()