Update app.py

app.py

@@ -35,34 +35,42 @@ DESCRIPTION = """\
 #Löwolf GPT1 Chat
 """
 css = """
-h1 {
- text-align: center;
-}
-
-#duplicate-button {
- margin: auto;
- color: white;
- background: #1565c0;
- border-radius: 100vh;
-}
-
-.contain {
- max-width: 900px;
- margin: auto;
- padding-top: 1.5rem;
-}
-
+ body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
+ .gradio_app { display: flex; flex-direction: column-reverse; max-width: 800px; margin: auto; }
+ .gradio_interface { box-shadow: 0 0 20px rgba(0,0,0,0.1); }
+ .gradio_text_input { border-radius: 20px; }
+ .gradio_text_output { height: calc(100vh - 150px); border-radius: 20px; overflow-y: auto; }
+ button { border-radius: 20px; }
+ #input-box { order: 2; }
+ #output-box { order: 1; }
+ #input { height: 50px; }
+ #output { height: calc(100vh - 150px); }
 """
 
-iface = gr.Interface(
- fn=generate_text,
- 
- outputs=gr.Textbox(label="Löwolf Chat Responses", placeholder="Responses will appear here...", interactive=False, lines=10),
- inputs=gr.Textbox(lines=2, placeholder="Type a message...", label="Your Message"),
- css=css
-)
+# Update the Blocks structure to reflect the desired layout
+with gr.Blocks(css=css) as demo:
+ gr.Markdown(DESCRIPTION)
+ gr.Markdown(LICENSE)
+ gr.DuplicateButton(value="Duplicate Space for private use", elem_id="duplicate-button")
+ with gr.Row().style(equal_height=False):
+ output_box = gr.Textbox(interactive=False, lines=25, placeholder="Responses will appear here...", elem_id="output-box")
+ input_box = gr.Textbox(lines=1, placeholder="Type a message...", elem_id="input-box")
+ generate_button = gr.Button("Submit")
+ generate_button.click(
+ fn=generate,
+ inputs=[input_box],
+ outputs=output_box
+ )
+
+if __name__ == "__main__":
+ demo.queue(max_size=20).launch()
+
+
+
+
+
+
 
-iface.launch()