Update app.py

app.py

@@ -66,9 +66,10 @@ body {
     color: #a0a0a0;
 }
 .header img {
-    max-width: 200px;
+    max-width: 300px;
     border-radius: 10px;
-    margin-top: 15px;
+    margin: 15px auto;
+    display: block;
 }
 .input-group, .output-group {
     background-color: #1a1a2e;
@@ -93,8 +94,39 @@ body {
 .generate-btn:hover {
     background-color: #c81e45 !important;
 }
+.example-prompts {
+    background-color: #1f2b47;
+    padding: 15px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+.example-prompts h3 {
+    color: #e94560;
+    margin-bottom: 10px;
+}
+.example-prompts ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+.example-prompts li {
+    margin-bottom: 5px;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+.example-prompts li:hover {
+    color: #e94560;
+}
 """
 
+# Example prompts
+example_prompts = [
+    "Write a Python function to find the n-th Fibonacci number.",
+    "Explain the concept of recursion in programming.",
+    "What are the key differences between Python and JavaScript?",
+    "Tell me a short story about a time-traveling robot.",
+    "Describe the process of photosynthesis in simple terms."
+]
+
 # Gradio interface
 with gr.Blocks(css=css) as iface:
     gr.HTML(
@@ -107,16 +139,43 @@ with gr.Blocks(css=css) as iface:
         """
     )
     
-    with gr.Group(elem_classes="input-group"):
-        prompt = gr.Textbox(label="Prompt", placeholder="Enter your prompt here...", lines=5)
-        max_length = gr.Slider(minimum=1, maximum=500, value=128, step=1, label="Max Length")
-        temperature = gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature")
-        generate_btn = gr.Button("Generate", elem_classes="generate-btn")
+    with gr.Group():
+        gr.HTML(
+            """
+            <div class="example-prompts">
+                <h3>Example Prompts:</h3>
+                <ul>
+                    """ + "".join([f"<li>{prompt}</li>" for prompt in example_prompts]) + """
+                </ul>
+            </div>
+            """
+        )
+        
+        with gr.Group(elem_classes="input-group"):
+            prompt = gr.Textbox(label="Prompt", placeholder="Enter your prompt here...", lines=5)
+            max_length = gr.Slider(minimum=1, maximum=500, value=128, step=1, label="Max Length")
+            temperature = gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature")
+            generate_btn = gr.Button("Generate", elem_classes="generate-btn")
 
-    with gr.Group(elem_classes="output-group"):
-        output = gr.Textbox(label="Generated Text", lines=10)
+        with gr.Group(elem_classes="output-group"):
+            output = gr.Textbox(label="Generated Text", lines=10)
 
     generate_btn.click(generate_text, inputs=[prompt, max_length, temperature], outputs=output)
 
+    # JavaScript to make example prompts clickable
+    gr.HTML(
+        """
+        <script>
+        document.addEventListener('DOMContentLoaded', (event) => {
+            document.querySelectorAll('.example-prompts li').forEach(item => {
+                item.addEventListener('click', event => {
+                    document.querySelector('textarea[data-testid="textbox"]').value = event.target.textContent;
+                });
+            });
+        });
+        </script>
+        """
+    )
+
 # Launch the app
 iface.launch()