""" Dispatch AI — Model Comparison Visualizer Pick 2 models → side-by-side comparison of size, speed, quality, RAM. Visual charts using matplotlib. """ import gradio as gr import matplotlib matplotlib.use("Agg") import matplotlib.pyplot as plt import numpy as np # --------------------------------------------------------------------------- # Model database — from our phone farm benchmarks + public info # --------------------------------------------------------------------------- MODELS = { "Qwen2.5-0.5B-Instruct": { "params_b": 0.5, "size_mb": 450, "gen_tps": 19.2, "prompt_tps": 65.3, "ram_mb": 4100, "load_s": 0.9, "quality_score": 5.2, "license": "Apache 2.0", "context": 32768, "arabic": "Good", }, "Qwen2.5-1.5B-Instruct": { "params_b": 1.5, "size_mb": 1060, "gen_tps": 16.9, "prompt_tps": 57.8, "ram_mb": 3500, "load_s": 1.8, "quality_score": 6.5, "license": "Apache 2.0", "context": 32768, "arabic": "Very Good", }, "Llama-3.2-1B-Instruct": { "params_b": 1.0, "size_mb": 890, "gen_tps": 16.3, "prompt_tps": 57.8, "ram_mb": 3500, "load_s": 1.5, "quality_score": 6.0, "license": "Llama 3.2", "context": 131072, "arabic": "Fair", }, "Llama-3.2-3B-Instruct": { "params_b": 3.0, "size_mb": 2100, "gen_tps": 12.4, "prompt_tps": 45.2, "ram_mb": 2800, "load_s": 3.2, "quality_score": 7.2, "license": "Llama 3.2", "context": 131072, "arabic": "Good", }, "Gemma-2-2B-IT": { "params_b": 2.0, "size_mb": 1600, "gen_tps": 13.8, "prompt_tps": 48.6, "ram_mb": 3200, "load_s": 2.5, "quality_score": 6.8, "license": "Gemma", "context": 8192, "arabic": "Fair", }, "Phi-3.5-mini": { "params_b": 3.8, "size_mb": 2300, "gen_tps": 14.2, "prompt_tps": 50.1, "ram_mb": 2900, "load_s": 2.8, "quality_score": 7.5, "license": "MIT", "context": 131072, "arabic": "Fair", }, "SmolLM2-1.7B": { "params_b": 1.7, "size_mb": 1200, "gen_tps": 17.1, "prompt_tps": 60.2, "ram_mb": 3400, "load_s": 1.4, "quality_score": 5.8, "license": "Apache 2.0", "context": 8192, "arabic": "Poor", }, "SmolLM2-135M": { "params_b": 0.135, "size_mb": 85, "gen_tps": 22.8, "prompt_tps": 89.5, "ram_mb": 4500, "load_s": 0.3, "quality_score": 3.0, "license": "Apache 2.0", "context": 8192, "arabic": "Poor", }, "TinyLlama-1.1B": { "params_b": 1.1, "size_mb": 700, "gen_tps": 18.5, "prompt_tps": 62.4, "ram_mb": 3800, "load_s": 1.1, "quality_score": 4.5, "license": "Apache 2.0", "context": 2048, "arabic": "Poor", }, } # Dark theme colors for matplotlib BG = "#0A0F1A" CARD = "#0E1424" ACCENT = "#1FE0E6" ACCENT2 = "#FF6B9D" WHITE = "#FFFFFF" GRAY = "#8A8F9C" def create_comparison_chart(model1_name, model2_name): """Create a grouped bar chart comparing two models across key metrics.""" if model1_name not in MODELS or model2_name not in MODELS: fig, ax = plt.subplots(figsize=(10, 6)) ax.text(0.5, 0.5, "Select two models", ha="center", va="center", color=ACCENT, fontsize=16) ax.set_facecolor(BG) fig.patch.set_facecolor(BG) plt.close(fig) return fig m1 = MODELS[model1_name] m2 = MODELS[model2_name] # Normalized metrics (0-10 scale for comparison) metrics = ["Size\n(smaller=better)", "Gen Speed\n(faster=better)", "Prompt Speed\n(faster=better)", "RAM Free\n(more=better)", "Load Time\n(faster=better)", "Quality\n(higher=better)"] # Normalize: higher is better for speed, ram, quality; lower is better for size, load time max_size = max(m["size_mb"] for m in MODELS.values()) max_load = max(m["load_s"] for m in MODELS.values()) m1_vals = [ 10 * (1 - m1["size_mb"] / max_size), # smaller = higher score m1["gen_tps"] / 25 * 10, m1["prompt_tps"] / 100 * 10, m1["ram_mb"] / 5000 * 10, 10 * (1 - m1["load_s"] / max_load), m1["quality_score"], ] m2_vals = [ 10 * (1 - m2["size_mb"] / max_size), m2["gen_tps"] / 25 * 10, m2["prompt_tps"] / 100 * 10, m2["ram_mb"] / 5000 * 10, 10 * (1 - m2["load_s"] / max_load), m2["quality_score"], ] x = np.arange(len(metrics)) width = 0.35 fig, ax = plt.subplots(figsize=(12, 6)) fig.patch.set_facecolor(BG) ax.set_facecolor(CARD) bars1 = ax.bar(x - width/2, m1_vals, width, label=model1_name, color=ACCENT, edgecolor=WHITE, linewidth=0.5) bars2 = ax.bar(x + width/2, m2_vals, width, label=model2_name, color=ACCENT2, edgecolor=WHITE, linewidth=0.5) ax.set_ylabel("Score (0-10, higher = better)", color=WHITE, fontsize=12) ax.set_title(f"Model Comparison: {model1_name} vs {model2_name}", color=WHITE, fontsize=14, pad=15) ax.set_xticks(x) ax.set_xticklabels(metrics, color=WHITE, fontsize=9) ax.set_ylim(0, 12) ax.tick_params(axis="y", colors=GRAY) ax.spines["bottom"].set_color(GRAY) ax.spines["left"].set_color(GRAY) ax.spines["top"].set_visible(False) ax.spines["right"].set_visible(False) ax.grid(axis="y", color=GRAY, alpha=0.2, linestyle="--") legend = ax.legend(facecolor=CARD, edgecolor=ACCENT, labelcolor=WHITE, fontsize=10) legend.get_frame().set_alpha(0.9) # Add value labels for bar in bars1 + bars2: height = bar.get_height() ax.annotate(f"{height:.1f}", xy=(bar.get_x() + bar.get_width() / 2, height), xytext=(0, 3), textcoords="offset points", ha="center", va="bottom", color=WHITE, fontsize=8) plt.tight_layout() plt.close(fig) return fig def create_radar_chart(model1_name, model2_name): """Create a radar/spider chart comparing two models.""" if model1_name not in MODELS or model2_name not in MODELS: fig, ax = plt.subplots(figsize=(8, 8), subplot_kw=dict(projection="polar")) ax.set_facecolor(BG) fig.patch.set_facecolor(BG) plt.close(fig) return fig m1 = MODELS[model1_name] m2 = MODELS[model2_name] categories = ["Compact", "Speed", "RAM\nEfficient", "Fast\nLoad", "Quality", "Arabic\nSupport"] N = len(categories) max_size = max(m["size_mb"] for m in MODELS.values()) max_load = max(m["load_s"] for m in MODELS.values()) arabic_scores = {"Poor": 2, "Fair": 5, "Good": 7, "Very Good": 9} m1_vals = [ 1 - m1["size_mb"] / max_size, m1["gen_tps"] / 25, m1["ram_mb"] / 5000, 1 - m1["load_s"] / max_load, m1["quality_score"] / 10, arabic_scores.get(m1["arabic"], 5) / 10, ] m2_vals = [ 1 - m2["size_mb"] / max_size, m2["gen_tps"] / 25, m2["ram_mb"] / 5000, 1 - m2["load_s"] / max_load, m2["quality_score"] / 10, arabic_scores.get(m2["arabic"], 5) / 10, ] angles = np.linspace(0, 2 * np.pi, N, endpoint=False).tolist() m1_vals += m1_vals[:1] m2_vals += m2_vals[:1] angles += angles[:1] fig, ax = plt.subplots(figsize=(8, 8), subplot_kw=dict(projection="polar")) fig.patch.set_facecolor(BG) ax.set_facecolor(CARD) ax.plot(angles, m1_vals, "o-", color=ACCENT, linewidth=2, label=model1_name) ax.fill(angles, m1_vals, color=ACCENT, alpha=0.15) ax.plot(angles, m2_vals, "o-", color=ACCENT2, linewidth=2, label=model2_name) ax.fill(angles, m2_vals, color=ACCENT2, alpha=0.15) ax.set_xticks(angles[:-1]) ax.set_xticklabels(categories, color=WHITE, fontsize=10) ax.set_ylim(0, 1) ax.set_yticks([0.2, 0.4, 0.6, 0.8, 1.0]) ax.set_yticklabels(["0.2", "0.4", "0.6", "0.8", "1.0"], color=GRAY, fontsize=8) ax.grid(color=GRAY, alpha=0.3) ax.spines["polar"].set_color(GRAY) ax.set_title("Model Capability Radar", color=WHITE, fontsize=14, pad=20) legend = ax.legend(loc="upper right", bbox_to_anchor=(1.3, 1.1), facecolor=CARD, edgecolor=ACCENT, labelcolor=WHITE, fontsize=10) legend.get_frame().set_alpha(0.9) plt.tight_layout() plt.close(fig) return fig def get_comparison_table(model1_name, model2_name): """Return a text comparison table.""" if model1_name not in MODELS or model2_name not in MODELS: return "Please select two models." m1 = MODELS[model1_name] m2 = MODELS[model2_name] rows = [ ("Parameters (B)", f"{m1['params_b']}", f"{m2['params_b']}"), ("Model Size (MB)", f"{m1['size_mb']}", f"{m2['size_mb']}"), ("Gen Speed (t/s)", f"{m1['gen_tps']}", f"{m2['gen_tps']}"), ("Prompt Speed (t/s)", f"{m1['prompt_tps']}", f"{m2['prompt_tps']}"), ("RAM Free (MB)", f"{m1['ram_mb']}", f"{m2['ram_mb']}"), ("Load Time (s)", f"{m1['load_s']}", f"{m2['load_s']}"), ("Quality Score", f"{m1['quality_score']}/10", f"{m2['quality_score']}/10"), ("Context Length", f"{m1['context']:,}", f"{m2['context']:,}"), ("Arabic Support", m1["arabic"], m2["arabic"]), ("License", m1["license"], m2["license"]), ] # Build winner indicators result = f"### Side-by-Side Comparison\n\n" result += f"| Metric | {model1_name} | {model2_name} | Winner |\n" result += f"|--------|-------------|-------------|--------|\n" # Define which is better (higher/lower) higher_better = {"Gen Speed (t/s)", "Prompt Speed (t/s)", "RAM Free (MB)", "Quality Score", "Context Length"} lower_better = {"Model Size (MB)", "Load Time (s)"} for metric, v1, v2 in rows: winner = "" if metric in higher_better or metric in lower_better: try: f1 = float(v1.split("/")[0].replace(",", "")) f2 = float(v2.split("/")[0].replace(",", "")) if metric in higher_better: winner = model1_name if f1 > f2 else (model2_name if f2 > f1 else "tie") else: winner = model1_name if f1 < f2 else (model2_name if f2 < f1 else "tie") winner = "🟢" if winner == model1_name else ("🔵" if winner == model2_name else "➖") except ValueError: pass result += f"| {metric} | {v1} | {v2} | {winner} |\n" return result # --- UI ----------------------------------------------------------------------- CSS = """ #dispatch-header h1 { color: #FFFFFF; font-size: 2.2rem; margin: 0; background: linear-gradient(90deg, #1FE0E6 0%, #FFFFFF 60%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #dispatch-header p { color: #1FE0E6; font-size: 1.05rem; margin: 6px 0 0 0; } .dispatch-footer { text-align: center; color: #8A8F9C; font-size: 0.9rem; padding-top: 8px; } """ with gr.Blocks( title="Dispatch AI — Model Comparison Visualizer", theme=gr.themes.Base( primary_hue="cyan", secondary_hue="cyan", neutral_hue="slate", font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui"], ).set( body_background_fill="#0A0F1A", body_background_fill_dark="#0A0F1A", body_text_color="#FFFFFF", body_text_color_dark="#FFFFFF", block_background_fill="#0E1424", block_background_fill_dark="#0E1424", block_border_color="#1FE0E6", block_border_width="1px", block_label_text_color="#1FE0E6", block_title_text_color="#1FE0E6", button_primary_background_fill="#1FE0E6", button_primary_background_fill_dark="#1FE0E6", button_primary_text_color="#0A0F1A", button_primary_border_color="#1FE0E6", input_background_fill="#0E1424", input_background_fill_dark="#0E1424", input_border_color="#1FE0E6", input_border_width="1px", ), css=CSS, ) as demo: with gr.Column(elem_id="dispatch-header"): gr.Markdown( """ # Dispatch AI — Model Comparison Visualizer Compare mobile AI models side-by-side with visual charts · Dispatch AI (FZE) · UAE """ ) gr.Markdown( """ Pick two models to compare size, speed, quality, RAM, and more. Data from our 80-phone farm. 🟢 = Model 1 wins · 🔵 = Model 2 wins · ➖ = tie """ ) with gr.Row(): model1 = gr.Dropdown(list(MODELS.keys()), label="Model 1 (🟢)", value="Qwen2.5-1.5B-Instruct") model2 = gr.Dropdown(list(MODELS.keys()), label="Model 2 (🔵)", value="Llama-3.2-3B-Instruct") compare_btn = gr.Button("⚔️ Compare Models", variant="primary") with gr.Row(): bar_chart = gr.Plot(label="Bar Chart Comparison") radar_chart = gr.Plot(label="Radar Chart Comparison") comparison_table = gr.Markdown() # Events compare_btn.click( fn=lambda m1, m2: (create_comparison_chart(m1, m2), create_radar_chart(m1, m2), get_comparison_table(m1, m2)), inputs=[model1, model2], outputs=[bar_chart, radar_chart, comparison_table], ) # Also update on dropdown change model1.change( fn=lambda m1, m2: (create_comparison_chart(m1, m2), create_radar_chart(m1, m2), get_comparison_table(m1, m2)), inputs=[model1, model2], outputs=[bar_chart, radar_chart, comparison_table], ) model2.change( fn=lambda m1, m2: (create_comparison_chart(m1, m2), create_radar_chart(m1, m2), get_comparison_table(m1, m2)), inputs=[model1, model2], outputs=[bar_chart, radar_chart, comparison_table], ) gr.Markdown( """
© 2026 Dispatch AI (FZE) · Sharjah, UAE · License 10818 · Benchmarks from 80-device phone farm · Q4_K_M quants · llama.cpp
""" ) if __name__ == "__main__": demo.queue() demo.launch()