add git submodule gradio app

README.md

@@ -9,4 +9,66 @@ app_file: app.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🧠 Prompt Engineering Interactive Lab
+
+An interactive demo that showcases how different prompt engineering techniques affect AI outputs when working with large language models.
+
+## About
+
+This application demonstrates various prompt engineering techniques using Google's Gemma models via OpenRouter API. Users can experiment with the same query across different prompt techniques to understand how the framing of a prompt dramatically impacts the quality and nature of AI responses.
+
+## Features
+
+- Compare multiple prompt engineering techniques side-by-side
+- Choose from various Gemma model sizes (1B to 27B parameters)
+- Adjust temperature to control creativity vs precision
+- Real-time prompt preview
+- Detailed explanations of each technique
+
+## Prompt Techniques Included
+
+- **Basic Prompting**: Direct questions without additional context
+- **Role-Based Prompting**: Assigning expertise personas to the model
+- **Step-by-Step Reasoning**: Requesting methodical thinking
+- **Chain of Thought**: Encouraging careful, sequential reasoning
+- **Few-Shot Learning**: Demonstrating examples before the actual prompt
+
+## Setup
+
+1. Install the required dependencies:
+   ```
+   pip install -r requirements.txt
+   ```
+
+2. (Optional) Set up your own OpenRouter API key:
+   - Sign up at [OpenRouter](https://openrouter.ai/)
+   - Create a `.env` file with your API key:
+     ```
+     OPENROUTER_API_KEY=your_api_key_here
+     ```
+   - A default API key is provided but has limited quota
+
+3. Run the application:
+   ```
+   python prompt_engineering_demo.py
+   ```
+
+4. Open your browser at `http://localhost:7860`
+
+## Usage
+
+1. Enter your query in the text box
+2. Select a Gemma model size
+3. Choose a prompt technique
+4. Adjust the temperature setting if desired
+5. Click "Generate Response"
+6. View the formatted prompt and resulting AI response
+7. Try the same query with different techniques to compare outcomes
+
+## Related Resources
+
+This demo is a companion to the blog post ["What is Prompt Engineering?"](https://slyracoon23.github.io/blog/posts/2025-03-15_what_is_prompt_engineering.html)
+
+## License
+
+[Add your license information here] 

app.py

@@ -0,0 +1,272 @@
+import gradio as gr
+import os
+import requests
+import json
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
+
+# Get API key from environment variable
+OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY", "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")
+
+# OpenRouter API endpoint
+API_URL = "https://openrouter.ai/api/v1/chat/completions"
+
+# Headers for OpenRouter API
+headers = {
+    "Authorization": f"Bearer {OPENROUTER_API_KEY}",
+    "Content-Type": "application/json",
+    "HTTP-Referer": "http://localhost:7860", # Replace with your site URL in production
+    "X-Title": "Prompt Engineering Lab" # Updated title for OpenRouter rankings
+}
+
+# Available Gemma models on OpenRouter (free tier), ordered from smallest to largest
+MODELS = {
+    "Google: Gemma 3 1B": "google/gemma-3-1b-it:free",
+    "Google: Gemma 3 4B": "google/gemma-3-4b-it:free",
+    "Google: Gemma 2 9B": "google/gemma-2-9b-it:free",
+    "Google: Gemma 3 12B": "google/gemma-3-12b-it:free",
+    "Google: Gemma 3 27B": "google/gemma-3-27b-it:free"
+}
+
+# Enhanced prompt templates with better descriptions
+PROMPT_TEMPLATES = {
+    "None": "{query}",
+    "Role-based": "You are an expert in {topic}.\n\n{query}",
+    "Step-by-Step": "{query}\n\nThink step by step to solve this problem.",
+    "Chain of Thought": "{query}\n\nLet's think through this carefully, reasoning one step at a time.",
+    "Few-Shot Learning": """Here are a few examples:
+
+Input: What is 2+2?
+Output: The answer is 4.
+
+Input: What is the capital of France?
+Output: The capital of France is Paris.
+
+Now answer this question: 
+
+{query}"""
+}
+
+# Descriptions of each technique for the UI
+TECHNIQUE_DESCRIPTIONS = {
+    "None": "Sends your query directly to the model without any prompt engineering technique applied. This serves as a baseline to compare other techniques against.",
+    
+    "Role-based": "Assigns an expert role to the model, which can improve responses for specific domains by framing the model's perspective. This technique leverages the model's training on expert writing styles.",
+    
+    "Step-by-Step": "Appends an instruction to think step-by-step at the end of your query, which often improves accuracy on complex problems by encouraging methodical thinking.",
+    
+    "Chain of Thought": "Appends a request to think carefully with step-by-step reasoning at the end of your query. This approach is particularly effective for complex reasoning tasks.",
+    
+    "Few-Shot Learning": "Provides examples of the expected format or reasoning before your query, helping the model understand the task through demonstration rather than instruction. This technique is powerful when you need specific output formats or reasoning patterns."
+}
+
+def generate_response(query, model, prompt_template, topic="", temperature=0.7, max_tokens=500):
+    """Generate a response from the selected model with the selected prompt template."""
+    if not OPENROUTER_API_KEY:
+        return "⚠️ Please set your OPENROUTER_API_KEY environment variable."
+    
+    if prompt_template == "Role-based" and not topic:
+        topic = "artificial intelligence"
+    
+    # Format the prompt based on the selected template
+    formatted_prompt = PROMPT_TEMPLATES[prompt_template].format(query=query, topic=topic)
+    
+    # Prepare the payload for the API request
+    payload = {
+        "model": MODELS[model],
+        "messages": [{"role": "user", "content": formatted_prompt}],
+        "temperature": temperature,
+        "max_tokens": max_tokens
+    }
+    
+    try:
+        # Make the API request
+        response = requests.post(API_URL, headers=headers, json=payload)
+        response.raise_for_status()
+        
+        # Parse the response
+        result = response.json()
+        return result["choices"][0]["message"]["content"]
+    except Exception as e:
+        return f"Error: {str(e)}"
+
+def update_prompt_preview(query, prompt_template, topic=""):
+    """Update the prompt preview based on the selected template."""
+    if prompt_template == "Role-based" and not topic:
+        topic = "artificial intelligence"
+    
+    return PROMPT_TEMPLATES[prompt_template].format(query=query, topic=topic)
+
+def update_technique_description(prompt_template):
+    """Update the technique description based on the selected template."""
+    return TECHNIQUE_DESCRIPTIONS[prompt_template]
+
+# Create the Gradio interface
+with gr.Blocks(title="Prompt Engineering Interactive Lab") as demo:
+    gr.Markdown("# 🧠 Prompt Engineering Interactive Lab")
+    gr.Markdown("""
+    This interactive lab demonstrates how different prompt engineering techniques can dramatically affect AI outputs.
+    
+    Experiment with various techniques and see how the same query produces different results based on how you frame your prompt.
+    This is a hands-on companion to the blog post ["What is Prompt Engineering?"](https://slyracoon23.github.io/blog/posts/2025-03-15_what_is_prompt_engineering.html)
+    """)
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            query_input = gr.Textbox(
+                label="Your Query",
+                placeholder="Enter your question or task here...",
+                lines=3
+            )
+            
+            with gr.Row():
+                with gr.Column(scale=1):
+                    model_dropdown = gr.Dropdown(
+                        choices=list(MODELS.keys()),
+                        label="Select Model",
+                        value=list(MODELS.keys())[2]  # Default to 9B model for better results
+                    )
+                
+                with gr.Column(scale=1):
+                    template_dropdown = gr.Dropdown(
+                        choices=list(PROMPT_TEMPLATES.keys()),
+                        label="Prompt Technique",
+                        value="None"
+                    )
+            
+            topic_input = gr.Textbox(
+                label="Topic/Expertise (for Role-based technique)",
+                placeholder="e.g., mathematics, history, programming",
+                visible=False
+            )
+            
+            temperature_slider = gr.Slider(
+                minimum=0.1,
+                maximum=1.0,
+                value=0.7,
+                step=0.1,
+                label="Temperature (Creativity vs Precision)",
+                info="Lower values = more precise, higher values = more creative"
+            )
+            
+            submit_button = gr.Button("Generate Response", variant="primary")
+        
+        with gr.Column(scale=1):
+            technique_description = gr.Markdown()
+            
+            prompt_preview = gr.Textbox(
+                label="Prompt Preview",
+                lines=5,
+                interactive=False
+            )
+            
+            response_output = gr.Textbox(
+                label="AI Response",
+                lines=15,
+                interactive=False
+            )
+    
+    # Examples section with real-world prompting scenarios
+    gr.Markdown("## Example Prompting Scenarios")
+    examples = gr.Examples(
+        examples=[
+            ["Explain how transformers work in machine learning"],
+            ["Compare and contrast renewable energy sources"],
+            ["What are three strategies to improve critical thinking?"],
+            ["Design a simple algorithm to find duplicate elements in an array"],
+            ["What are the ethical implications of AI in healthcare?"]
+        ],
+        inputs=query_input
+    )
+    
+    # Connect components with events
+    template_dropdown.change(
+        fn=lambda x: gr.update(visible=(x == "Role-based")),
+        inputs=template_dropdown,
+        outputs=topic_input
+    )
+    
+    # Update technique description when template changes
+    template_dropdown.change(
+        fn=update_technique_description,
+        inputs=template_dropdown,
+        outputs=technique_description
+    )
+    
+    # Update prompt preview when inputs change
+    for component in [query_input, template_dropdown, topic_input]:
+        component.change(
+            fn=update_prompt_preview,
+            inputs=[query_input, template_dropdown, topic_input],
+            outputs=prompt_preview
+        )
+    
+    # Submit button event
+    submit_button.click(
+        fn=generate_response,
+        inputs=[query_input, model_dropdown, template_dropdown, topic_input, temperature_slider],
+        outputs=response_output
+    )
+    
+    # Add explanations of prompt engineering and its impact
+    gr.Markdown("""
+    ## Understanding Prompt Engineering
+    
+    Prompt engineering is the practice of crafting inputs to AI systems to elicit desired outputs. It's a key skill for effectively using large language models.
+    
+    ### Why Prompt Engineering Matters
+    
+    The same model can produce dramatically different results based solely on how you frame your prompt. This demo lets you experience this firsthand by comparing different techniques:
+    
+    - **Basic Prompting**: Direct questions yield direct answers, but may lack depth or context
+    - **Role-Based Prompting**: Giving the AI a persona or expertise lens changes its perspective
+    - **Step-by-Step Reasoning**: Requesting explicit reasoning steps improves accuracy for complex tasks
+    - **Chain of Thought**: Extended reasoning that connects concepts leads to more comprehensive answers
+    - **Few-Shot Learning**: Showing examples of desired outputs helps the model understand your expectations
+    
+    ### Experiment Tips
+    
+    - Try the same query with different techniques to see how responses vary
+    - Adjust the temperature to see how it affects output creativity vs. precision
+    - For complex questions, compare basic prompting with reasoning-based techniques
+    - For domain-specific questions, try role-based prompting with relevant expertise
+    
+    This demo uses the Google Gemma model family via OpenRouter's API.
+    """)
+    
+    # Instructions for setting up the API key
+    gr.Markdown("""
+    ## Setup Information
+    
+    This demo uses the OpenRouter API to access Gemma models. The default API key has limited quota.
+    
+    For unlimited use:
+    1. Sign up at [OpenRouter](https://openrouter.ai/)
+    2. Get your API key from the dashboard
+    3. Create a `.env` file in this directory with: `OPENROUTER_API_KEY=your_api_key_here`
+    """)
+
+# Handle case when API key is not set
+if not OPENROUTER_API_KEY:
+    demo = gr.Blocks().queue()
+    with demo:
+        gr.Markdown("# Prompt Engineering Lab - Setup Required")
+        gr.Markdown("""
+        ## Setup Instructions
+        
+        To use this demo, you need an OpenRouter API key:
+        
+        1. Sign up at [OpenRouter](https://openrouter.ai/)
+        2. Get your API key from the dashboard
+        3. Create a file named `.env` in the same directory as this script with:
+           ```
+           OPENROUTER_API_KEY=your_api_key_here
+           ```
+        4. Restart this application
+        """)
+
+# Launch the Gradio app
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860)

requirements.txt

@@ -0,0 +1,3 @@
+gradio
+requests
+python-dotenv