Update app.py

app.py

@@ -19,9 +19,9 @@ def generate_text(prompt, max_length, temperature):
         {"role": "user", "content": prompt}
     ]
     formatted_prompt = tokenizer.apply_chat_template(messages, add_generation_prompt=True, tokenize=False)
-    
+
     inputs = tokenizer(formatted_prompt, return_tensors="pt").to(model.device)
-    
+
     outputs = model.generate(
         **inputs,
         max_new_tokens=max_length,
@@ -30,9 +30,10 @@ def generate_text(prompt, max_length, temperature):
         top_k=100,
         top_p=0.95,
     )
-    
+
     return tokenizer.decode(outputs[0][inputs['input_ids'].shape[1]:], skip_special_tokens=True)
 
+
 # Custom CSS
 css = """
 body {
@@ -127,6 +128,7 @@ example_prompts = [
     "Describe the process of photosynthesis in simple terms."
 ]
 
+# Gradio interface
 # Gradio interface
 with gr.Blocks(css=css) as iface:
     gr.HTML(
@@ -138,19 +140,12 @@ with gr.Blocks(css=css) as iface:
         </div>
         """
     )
-    
+
     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="example-prompts"):
+            gr.HTML("<h3>Example Prompts:</h3>")
+            example_buttons = [gr.Button(prompt) for prompt in example_prompts]
+
         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")
@@ -162,20 +157,9 @@ with gr.Blocks(css=css) as iface:
 
     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>
-        """
-    )
+    # Set up example prompt buttons
+    for button in example_buttons:
+        button.click(lambda x: x, inputs=[button], outputs=[prompt])
 
 # Launch the app
 iface.launch()