use gradio blocks and chatbot (#2)

- use gradio blocks and chatbot (f2b8faf5fd99c7a718e029d1eb2fecc2441ee9e3)


Co-authored-by: AK <akhaliq@users.noreply.huggingface.co>

app.py

@@ -31,7 +31,7 @@ def generate_response(api_key: str, prompt: str) -> Tuple[List[Tuple[str, str, f
     Generate a response to the given prompt using a step-by-step reasoning approach.
     """
     system_message = """You are an expert AI assistant that explains your reasoning step by step. For each step, provide a title that describes what you're doing in that step, along with the content. Decide if you need another step or if you're ready to give the final answer. Respond in JSON format with 'title', 'content', and 'next_action' (either 'continue' or 'final_answer') keys. USE AS MANY REASONING STEPS AS POSSIBLE. AT LEAST 3. BE AWARE OF YOUR LIMITATIONS AS AN LLM AND WHAT YOU CAN AND CANNOT DO. IN YOUR REASONING, INCLUDE EXPLORATION OF ALTERNATIVE ANSWERS. CONSIDER YOU MAY BE WRONG, AND IF YOU ARE WRONG IN YOUR REASONING, WHERE IT WOULD BE. FULLY TEST ALL OTHER POSSIBILITIES. YOU CAN BE WRONG. WHEN YOU SAY YOU ARE RE-EXAMINING, ACTUALLY RE-EXAMINE, AND USE ANOTHER APPROACH TO DO SO. DO NOT JUST SAY YOU ARE RE-EXAMINING. USE AT LEAST 3 METHODS TO DERIVE THE ANSWER. USE BEST PRACTICES."""
-
+    
     messages = [
         {"role": "system", "content": system_message},
         {"role": "user", "content": prompt},
@@ -51,7 +51,7 @@ def generate_response(api_key: str, prompt: str) -> Tuple[List[Tuple[str, str, f
         steps.append((f"Step {step_count}: {step_data['title']}", step_data['content'], thinking_time))
         messages.append({"role": "assistant", "content": json.dumps(step_data)})
         
-        if step_data['next_action'] == 'final_answer':
+        if step_data.get('next_action') == 'final_answer':
             break
         
         step_count += 1
@@ -63,34 +63,87 @@ def generate_response(api_key: str, prompt: str) -> Tuple[List[Tuple[str, str, f
     thinking_time = time.time() - start_time
     total_thinking_time += thinking_time
     
-    steps.append(("Final Answer", final_data['content'], thinking_time))
+    steps.append(("Final Answer", final_data.get('content', 'No final answer provided.'), thinking_time))
 
     return steps, total_thinking_time
 
-def generate_ui(api_key: str, prompt: str) -> str:
+def generate_ui(api_key: str, prompt: str) -> Tuple[List[Tuple[str, str]], float]:
     """
     Generate the UI output based on the response to the given prompt.
     """
     steps, total_time = generate_response(api_key, prompt)
-    result = "\n\n".join([
-        f"{'### ' if title.startswith('Final Answer') else '**'}{title}{'**' if not title.startswith('Final Answer') else ''}\n\n{content}"
-        for title, content, _ in steps
-    ])
-    result += f"\n\n**Total thinking time:** {total_time:.2f} seconds"
-    return result
+    conversation = []
+    for title, content, _ in steps:
+        if title.startswith("Step"):
+            conversation.append(("Assistant", f"**{title}**\n\n{content}"))
+        elif title == "Final Answer":
+            conversation.append(("Assistant", f"**{title}**\n\n{content}"))
+        else:
+            conversation.append(("Assistant", content))
+    return conversation, total_time
 
-# Gradio Interface with an API key input box
-iface = gr.Interface(
-    fn=generate_ui, 
-    inputs=[gr.Textbox(label="API Key", type="password", placeholder="Enter your Cerebras API key"), 
-            gr.Textbox(lines=2, label="Query", placeholder="Enter your query here...")], 
-    outputs="markdown",
-    title="o1-like chain of thought - llama-3.1 70b on Cerebras",
-    description="""
-    Implement Chain of Thought with prompting to improve output accuracy.
-    It is powered by Cerebras, ensuring fast reasoning steps.
-    """
-)
+# Gradio Blocks Interface with a Chatbot component and API key input
+def main():
+    with gr.Blocks() as demo:
+        gr.Markdown("# o1-like Chain of Thought - LLaMA-3.1 70B on Cerebras")
+        gr.Markdown("""
+        Implement Chain of Thought with prompting to improve output accuracy.
+        Powered by Cerebras, ensuring fast reasoning steps.
+        """)
+        
+        with gr.Row():
+            api_key_input = gr.Textbox(
+                label="Cerebras API Key", 
+                type="password", 
+                placeholder="Enter your Cerebras API key", 
+                show_label=True
+            )
+        
+        chatbot = gr.Chatbot(label="Conversation")
+        with gr.Row():
+            user_input = gr.Textbox(
+                label="Your Query", 
+                placeholder="Enter your query here...", 
+                show_label=True
+            )
+            submit_btn = gr.Button("Submit")
+        
+        thinking_time_display = gr.Textbox(
+            label="Total Thinking Time", 
+            value="", 
+            interactive=False
+        )
+        
+        def respond(api_key, message, history):
+            if not api_key:
+                return history, "Please provide a valid Cerebras API key."
+
+            steps, total_time = generate_response(api_key, message)
+            for title, content, _ in steps:
+                if title.startswith("Step"):
+                    history.append(("Assistant", f"**{title}**\n\n{content}"))
+                elif title == "Final Answer":
+                    history.append(("Assistant", f"**{title}**\n\n{content}"))
+                else:
+                    history.append(("Assistant", content))
+            return history, f"**Total thinking time:** {total_time:.2f} seconds"
+
+        submit_btn.click(
+            fn=respond, 
+            inputs=[api_key_input, user_input, chatbot], 
+            outputs=[chatbot, thinking_time_display],
+            queue=True
+        )
+        
+        # Optional: Allow pressing Enter to submit
+        user_input.submit(
+            fn=respond, 
+            inputs=[api_key_input, user_input, chatbot], 
+            outputs=[chatbot, thinking_time_display],
+            queue=True
+        )
+    
+    demo.launch()
 
 if __name__ == "__main__":
-    iface.launch()
+    main()