Initial commit

README.md

@@ -11,4 +11,28 @@ license: mit
 short_description: Try LLM's in a side by side comparison with prompt levers
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# README.md
+# 🧠 Prompt Canvas Engine
+
+Test different prompt phrasings across two LLMs and compare outputs side-by-side.
+
+
+## Features
+- Compare any two models supported by OpenRouter
+- Select or customize prompts
+- Tune temperature, top_p, penalties, and max_tokens
+- See outputs side-by-side
+- Rate model outputs
+- Share publicly
+
+
+## 🚀 Run locally
+```bash
+export OPENROUTER_API_KEY=your_key_here
+python app.py
+```
+
+## 📤 Deploy on Hugging Face
+- Create a new **Gradio Space**
+- Upload `app.py`, `requirements.txt`, and `README.md`
+- Set `OPENROUTER_API_KEY` in Space secrets

app.py

@@ -0,0 +1,167 @@
+import gradio as gr
+import requests
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+API_KEY = os.getenv("OPENROUTER_API_KEY")
+API_URL = "https://openrouter.ai/api/v1/chat/completions"
+
+MODEL_METADATA = {
+    "mistralai/mistral-7b-instruct": "⚡ Free (Very Fast)",
+    "meta-llama/llama-3-70b-instruct": "⚡ Free (Very Accurate)",
+    "google/gemini-2.0-flash-exp:free": "⚡ Free (Fast, Token Efficient)",
+
+    "huggingfaceh4/zephyr-7b-beta": "🪙 Token-efficient (Compact, Responsive)",
+    "nousresearch/nous-capybara-7b": "🪙 Token-efficient (Lightweight)",
+    "meta-llama/llama-3-8b-instruct": "🪙 Token-efficient (Fast, Balanced)",
+
+    "openai/gpt-3.5-turbo": "💰 Paid (Fast, Cheap)",
+    "openai/gpt-4": "💰 Paid (Accurate, Expensive)",
+    "anthropic/claude-3-haiku": "💰 Paid (Long Context, Fast)",
+    "cohere/command-r-plus": "💰 Paid (Context-Aware)"
+}
+
+MODEL_OPTIONS = list(MODEL_METADATA.keys())
+FREE_MODELS = [m for m in MODEL_OPTIONS if "⚡ Free" in MODEL_METADATA[m]]
+
+def get_default_model2(model1):
+    for m in FREE_MODELS:
+        if m != model1:
+            return f"{m} {MODEL_METADATA[m]}"
+    return f"{FREE_MODELS[0]} {MODEL_METADATA[FREE_MODELS[0]]}"
+
+rating_store = []
+
+def run_dual_model(prompt, model1, model2, temperature, top_p, max_tokens, freq_penalty, pres_penalty):
+    outputs = []
+    for model in [model1, model2]:
+        data = {
+            "model": model,
+            "messages": [
+                {"role": "system", "content": "You are a helpful assistant."},
+                {"role": "user", "content": prompt}
+            ],
+            "temperature": temperature,
+            "top_p": top_p,
+            "max_tokens": max_tokens,
+            "frequency_penalty": freq_penalty,
+            "presence_penalty": pres_penalty
+        }
+        headers = {
+            "Authorization": f"Bearer {API_KEY}",
+            "Content-Type": "application/json"
+        }
+        try:
+            resp = requests.post(API_URL, headers=headers, json=data)
+            resp_data = resp.json()
+            if "choices" not in resp_data:
+                outputs.append(f"API Error: {resp_data.get('error', 'No choices')}")
+            else:
+                outputs.append(resp_data["choices"][0]["message"]["content"].strip())
+        except Exception as e:
+            outputs.append(f"Error: {e}")
+    return tuple(outputs)
+
+def record_feedback(prompt_index, rating):
+    rating_store.append((prompt_index, rating))
+    return f"Feedback saved: Output {prompt_index+1} rated {rating}"
+
+def extract_model(raw_label):
+    return raw_label.split(" ")[0]
+
+def build_combined_prompt(task, user_text):
+    return f"{task}\n\n{user_text}"
+
+def update_model2_on_model1_change(m1_val):
+    model_key = extract_model(m1_val)
+    return get_default_model2(model_key)
+
+# Load CSS from external file
+def load_css():
+    try:
+        with open('styles.css', 'r') as f:
+            return f.read()
+    except FileNotFoundError:
+        print("Warning: styles.css not found. Using default styling.")
+        return ""
+
+css = load_css()
+
+with gr.Blocks(css=css, title="Prompt Canvas Engine") as demo:
+    gr.Markdown("# 🧠 Prompt Canvas Lab\n## **Compare prompt effectiveness across two language models.**")
+
+    with gr.Row():
+        model1 = gr.Dropdown(label="Model 1", choices=[f"{k} {MODEL_METADATA[k]}" for k in MODEL_OPTIONS], value="mistralai/mistral-7b-instruct ⚡ Free (Very Fast)")
+        model2 = gr.Dropdown(label="Model 2", choices=[f"{k} {MODEL_METADATA[k]}" for k in MODEL_OPTIONS], value="meta-llama/llama-3-70b-instruct ⚡ Free (Very Accurate)")
+
+    with gr.Row():
+        prompt_selector = gr.Dropdown(label="Prompt", choices=[
+            "Summarize the paragraph in 3 points.",
+            "Translate this sentence to French.",
+            "Write a one-sentence TL;DR.",
+            "Fix grammar and spelling mistakes.",
+            "Extract keywords from the text.",
+            "Convert this bullet list into a paragraph.",
+            "Write a short product description for SEO."
+        ], value="Summarize the paragraph in 3 points.", interactive=True, scale=1)
+
+        user_input = gr.Textbox(label="Input Text", value="A qubit—short for quantum bit—is the fundamental unit of quantum information. Unlike classical bits that exist strictly as 0 or 1, a qubit can exist in a superposition of both states simultaneously, thanks to the principles of quantum mechanics. This allows quantum computers to process complex problems with exponentially greater efficiency.", lines=3, max_lines=3, show_copy_button=True)
+
+    # Parameter controls section
+    with gr.Row():
+        gr.Markdown("## **Parameter Guide**")
+    
+    with gr.Row(elem_classes="params-row"):
+        with gr.Column(elem_classes="param-sliders"):
+            temperature = gr.Slider(0.0, 1.0, value=0.7, step=0.1, label="Temperature: Controls randomness (higher = more creative)", interactive=True)
+            top_p = gr.Slider(0.1, 1.0, value=1.0, step=0.1, label="Top-p: Nucleus sampling (higher = more variety)", interactive=True)
+            max_tokens = gr.Slider(32, 1024, value=256, step=32, label="Max Tokens: Limits response length", interactive=True)
+            freq_penalty = gr.Slider(-2.0, 2.0, value=0.0, step=0.1, label="Frequency Penalty: Reduces repetition", interactive=True)
+            pres_penalty = gr.Slider(-2.0, 2.0, value=0.0, step=0.1, label="Presence Penalty: Encourages topic diversity", interactive=True)
+
+    run_btn = gr.Button("Run", elem_classes="run-btn")
+
+    with gr.Row():
+        out1 = gr.Textbox(label="Model 1 Output", lines=6)
+        out2 = gr.Textbox(label="Model 2 Output", lines=6)
+
+    with gr.Row(elem_classes="rating-row"):
+        rating1 = gr.Radio(choices=["👍", "👎"], label="Rate Model 1")
+        rating2 = gr.Radio(choices=["👍", "👎"], label="Rate Model 2")
+
+    feedback_msg = gr.Textbox(visible=False)
+
+    run_btn.click(
+        fn=lambda task, user_text, m1, m2, t, p, mt, fp, pp: run_dual_model(
+            build_combined_prompt(task, user_text),
+            extract_model(m1),
+            extract_model(m2),
+            t, p, mt, fp, pp),
+        inputs=[prompt_selector, user_input, model1, model2, temperature, top_p, max_tokens, freq_penalty, pres_penalty],
+        outputs=[out1, out2]
+    )
+
+    model1.change(update_model2_on_model1_change, inputs=model1, outputs=model2)
+
+    rating1.change(fn=record_feedback, inputs=[gr.State(0), rating1], outputs=feedback_msg)
+    rating2.change(fn=record_feedback, inputs=[gr.State(1), rating2], outputs=feedback_msg)
+
+    # Add shareable link section
+    with gr.Row():
+        gr.Markdown("---")
+    
+    with gr.Row():
+        gr.Markdown("## **Share this workspace:** ")
+        share_link = gr.Textbox(
+            value="https://your-app-url.com", 
+            label="", 
+            interactive=False,
+            show_copy_button=True,
+            scale=4
+        )
+        gr.Markdown("*Copy this link to collaborate with your team on prompt optimization.*")
+
+if __name__ == "__main__":
+    demo.launch(share=True)  # This will generate a shareable link

requirements.txt

@@ -0,0 +1,6 @@
+# requirements.txt
+gradio
+requests
+python-dotenv
+openai
+

styles.css

@@ -0,0 +1,83 @@
+body { 
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+    background: #f4f7fb; 
+}
+
+h1, h2, label { 
+    color: #1f2937; 
+    font-weight: bold;
+}
+
+/* Make all form labels bold */
+.gr-form label,
+.gr-dropdown label,
+.gr-textbox label,
+.gr-slider label,
+.gr-radio label {
+    font-weight: bold !important;
+}
+
+.gr-button { 
+    background: linear-gradient(90deg, #4f46e5 0%, #3b82f6 100%) !important; 
+    color: white !important; 
+    font-weight: 600; 
+    border-radius: 8px;
+    border: none; 
+    padding: 10px 24px;
+}
+
+.run-btn { 
+    background: #fa8072 !important; 
+    color: white !important; 
+    font-weight: 600; 
+    border-radius: 8px;
+    border: none; 
+    padding: 12px 32px;
+    font-size: 16px;
+}
+
+.gr-radio input:checked + span { 
+    color: #2563eb !important; 
+    font-weight: 700; 
+}
+
+.gr-textbox { 
+    background: #fff; 
+    border: 1px solid #d1d5db; 
+    border-radius: 6px; 
+    max-height: 160px; 
+    overflow-y: auto; 
+    resize: none;
+}
+
+.gr-dropdown { 
+    border-radius: 6px; 
+}
+
+.gr-slider { 
+    color: #2563eb; 
+}
+
+.rating-row { 
+    margin-top: 10px; 
+}
+
+.params-row { 
+    display: flex; 
+    align-items: flex-start; 
+    gap: 24px; 
+}
+
+.param-sliders { 
+    flex: 3; 
+}
+
+.param-desc { 
+    flex: 2; 
+    background: #e0e7ff; 
+    padding: 12px; 
+    border-radius: 8px; 
+    color: #3730a3; 
+    font-size: 14px; 
+    line-height: 1.4; 
+}