Update utils.py

utils.py

@@ -1,113 +1,50 @@
-import gradio as gr
-from utils import generate_challenge, generate_image
-import json
-
-TOPICS = [
-    "recursion", "Fibonacci sequence", "loops", "dictionary usage",
-    "list comprehensions", "sorting algorithms", "basic OOP"
-]
-
-TYPING_GAME_HTML = f"""
-<div id="typingGame" style="width:100%; height:400px; position:relative; overflow:hidden; border:1px solid #ccc; margin-bottom:20px;"></div>
-<div style="text-align:center;">
-    <button id="startGameBtn" style="padding:10px 20px; font-size:16px;">Start Typing Game</button>
-    <p>Score: <span id="score">0</span></p>
-</div>
-<script>
-let gameArea = document.getElementById("typingGame");
-let startBtn = document.getElementById("startGameBtn");
-let scoreDisplay = document.getElementById("score");
-let letters = [];
-let animationFrame;
-let score = 0;
-let gameStarted = false;
-
-const TOPICS = {json.dumps(TOPICS)};
-
-function randomLetter() {{
-    const topic = TOPICS[Math.floor(Math.random() * TOPICS.length)];
-    const char = topic[Math.floor(Math.random() * topic.length)];
-    return char;
-}}
-
-function spawnLetter() {{
-    const char = randomLetter();
-    const span = document.createElement("span");
-    span.textContent = char;
-    span.style.position = "absolute";
-    span.style.top = "0px";
-    span.style.left = Math.random() * (gameArea.offsetWidth - 20) + "px";
-    span.style.fontSize = "32px";
-    span.style.fontFamily = "Consolas, monospace";
-    span.style.color = "#fa29bc";
-    letters.push({{elem: span, y: 0}});
-    gameArea.appendChild(span);
-}}
-
-function update() {{
-    for (let i = letters.length - 1; i >= 0; i--) {{
-        let letter = letters[i];
-        letter.y += 2; // speed
-        letter.elem.style.top = letter.y + "px";
-        if (letter.y > gameArea.offsetHeight) {{
-            gameArea.removeChild(letter.elem);
-            letters.splice(i,1);
-        }}
-    }}
-    animationFrame = requestAnimationFrame(update);
-}}
-
-document.addEventListener("keydown", e => {{
-    if (!gameStarted) return;
-    for (let i = letters.length - 1; i >=0; i--) {{
-        let letter = letters[i];
-        if (letter.elem.textContent.toLowerCase() === e.key.toLowerCase()) {{
-            score++;
-            scoreDisplay.textContent = score;
-            // pop animation
-            letter.elem.style.transition = "transform 0.2s, opacity 0.2s";
-            letter.elem.style.transform = "scale(2)";
-            letter.elem.style.opacity = "0";
-            setTimeout(()=>{{gameArea.removeChild(letter.elem)}},200);
-            letters.splice(i,1);
-            break;
-        }}
-    }}
-}});
-
-startBtn.onclick = () => {{
-    if (gameStarted) return;
-    gameStarted = true;
-    spawnInterval = setInterval(spawnLetter, 600); // spawn every 0.6s
-    update();
-}};
-</script>
-"""
-
-
-# ---------- Gradio Interface ----------
-with gr.Blocks(css="""
-    body { background:#111; color:#fa29bc; font-family:Consolas, monospace; }
-    .gr-button { background:#fa29bc; color:white; border:none; }
-    .gr-download { background:#fa29bc; color:white; border:none; }
-    footer { display:none; }
-""") as demo:
-    gr.Markdown("## 🚀 Python Challenge Generator")
-    gr.HTML(TYPING_GAME_HTML)
-    
-    with gr.Row():
-        download_btn = gr.File(label="Download Challenge")
-        image_output = gr.Image(label="Code Snippet")
-
-    generate_btn = gr.Button("Generate Challenge")
-
-    def generate():
-        text, file_path = generate_challenge()
-        topic = text.split("\n")[0]  # first line as topic
-        image = generate_image(topic)
-        return file_path, image
-
-    generate_btn.click(fn=generate, outputs=[download_btn, image_output])
-
-if __name__ == "__main__":
-    demo.launch()
+import os
+import openai
+from PIL import Image
+from io import BytesIO
+import base64
+
+# ---------- Load OpenAI API Key ----------
+OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY")
+openai.api_key = OPENAI_API_KEY
+
+# ---------- Generate Coding Challenge ----------
+def generate_challenge(topic="Python Challenge"):
+    """
+    Generates a step-by-step Python tutorial with a small challenge.
+    Returns a tuple: (path to text file, text content)
+    """
+    prompt = f"""
+    Create a fun, step-by-step Python tutorial for beginners on the topic: "{topic}".
+    Include explanations, Python code snippets, and end with a small practice challenge.
+    """
+    response = openai.chat.completions.create(
+        model="gpt-4",
+        messages=[{"role": "user", "content": prompt}]
+    )
+    text = response.choices[0].message.content
+
+    # Save to text file
+    file_path = "/tmp/challenge.txt"
+    with open(file_path, "w", encoding="utf-8") as f:
+        f.write(text)
+
+    return file_path, text
+
+# ---------- Generate Terminal-Style Code Image ----------
+def generate_image(code_snippet, size="1024x1024"):
+    """
+    Generates an image of a code snippet in a dark terminal / VSCode style using OpenAI.
+    Returns a PIL image object.
+    """
+    prompt = f"A screenshot of a terminal window showing this Python code:\n\n{code_snippet}\n" \
+             "Terminal has dark background, monospace font, minimal UI"
+    response = openai.images.generate(
+        model="gpt-image-1",
+        prompt=prompt,
+        size=size
+    )
+    image_base64 = response.data[0].b64_json
+    image = Image.open(BytesIO(base64.b64decode(image_base64)))
+    display_image = image.resize((image.width // 2, image.height // 2))
+    return display_image