Upload 7 files

Dockerfile

@@ -0,0 +1,23 @@
+# Use an official Python runtime as a parent image.
+FROM python:3.9-slim
+
+# Set the working directory in the container.
+WORKDIR /app
+
+# Copy requirements.txt into the container at /app.
+COPY requirements.txt .
+
+# Install any needed packages specified in requirements.txt.
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the code into the container at /app.
+COPY . .
+
+# Expose the port that Flask uses. (Hugging Face Spaces usually expects port 7860, but for Flask default port 5000 is common)
+EXPOSE 7860
+
+# Define environment variable for Flask (optional)
+ENV FLASK_APP=app.py
+
+# Run the command to start your app.
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,116 @@
+from flask import Flask, render_template, request, url_for, send_from_directory, after_this_request
+from google import genai
+import re
+import subprocess
+import os
+import shutil
+import time
+from threading import Timer
+
+app = Flask(__name__)
+
+# Load API key from environment variable
+API_KEY = os.environ.get("GOOGLE_API_KEY")
+if not API_KEY:
+    raise ValueError("Missing GOOGLE_API_KEY environment variable.")
+client = genai.Client(api_key=API_KEY)
+
+@app.route("/", methods=["GET", "POST"])
+def index():
+    if request.method == "POST":
+        prompt = request.form.get("prompt")
+        if not prompt:
+            return render_template("index.html")
+        
+        while True:
+            try:
+                ai_response = client.models.generate_content(
+                    model="gemini-2.0-flash-lite-preview-02-05",
+                    contents=f"""You are 'Manimator', an expert Manim animator and coder. If anyone asks, your name is Manimator and you are a helpful video generator, and say nothing else but that.
+The user wants you to code this: {prompt}. 
+Plan out in chain of thought what you are going to do first, then give the final code output in ```python``` codeblock.
+Make sure to not use external images or resources other than default Manim.
+Keep the scene uncluttered and aesthetically pleasing.
+You got this!! <3
+"""
+                )
+            except Exception as e:
+                print("Error calling GenAI API:", e)
+                time.sleep(2)
+                continue
+
+            pattern = r"```python\s*(.*?)\s*```"
+            match = re.search(pattern, ai_response.text, re.DOTALL)
+            if match:
+                code = match.group(1)
+            else:
+                print("No python code block found in the AI response, retrying...")
+                time.sleep(2)
+                continue
+
+            scene_match = re.search(r"class\s+(\w+)\(.*Scene.*\):", code)
+            if scene_match:
+                scene_name = scene_match.group(1)
+            else:
+                scene_name = "MyScene"
+                
+            code_filename = "generated_manim_scene.py"
+            try:
+                with open(code_filename, "w") as f:
+                    f.write(code)
+            except Exception as e:
+                print("Error writing code file:", e)
+                time.sleep(2)
+                continue 
+
+            video_filename = "output_video.mp4"
+            cmd = [
+                "manim",
+                "-qm",
+                "-o", video_filename,
+                code_filename,
+                scene_name
+            ]
+            try:
+                subprocess.run(cmd, check=True)
+            except subprocess.CalledProcessError as e:
+                print("Error during Manim rendering:", e)
+                time.sleep(2)
+                continue
+
+            video_path_in_media = os.path.join("media", "videos", code_filename.replace(".py", ""), "720p30", video_filename)
+            static_video_path = os.path.join("static", video_filename)
+
+            try:
+                shutil.move(video_path_in_media, static_video_path)
+            except FileNotFoundError:
+                print("Manim output file not found. Check your manim code and output location.")
+                time.sleep(2)
+                continue
+            except Exception as e:
+                print("Error moving video file:", e)
+                time.sleep(2)
+                continue
+
+            video_url = url_for('get_video', filename=video_filename)
+            return render_template("result.html", video_url=video_url)
+            
+    return render_template("index.html")
+
+@app.route("/video/<filename>")
+def get_video(filename):
+    video_path = os.path.join("static", filename)
+    response = send_from_directory("static", filename)
+
+    def remove_file():
+        try:
+            os.remove(video_path)
+            print("Removed video file:", video_path)
+        except Exception as e:
+            app.logger.error("Error removing video file: %s", e)
+    Timer(5, remove_file).start()
+
+    return response
+
+if __name__ == "__main__":
+    app.run(debug=False)

requirements.txt

@@ -0,0 +1,2 @@
+google-genai
+flask

static/script.js

@@ -0,0 +1,8 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const form = document.getElementById('promptForm');
+    form.addEventListener('submit', function() {
+      // Display the loading overlay when the form is submitted.
+      document.getElementById("loading").style.display = "flex";
+    });
+  });
+  

static/styles.css

@@ -0,0 +1,149 @@
+/* Base resets */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #0d1117; /* GitHub dark background */
+    color: #c9d1d9; /* Light text color */
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+  }
+  
+  /* Header */
+  header {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 30px;
+  }
+  
+  header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 5px;
+  }
+  
+  header p {
+    font-size: 1.1rem;
+    color: #8b949e;
+  }
+  
+  /* Container Card */
+  .container {
+    background: #161b22; /* dark card background */
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    max-width: 600px;
+    margin-bottom: 30px;
+  }
+  
+  /* Form Styles */
+  form label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 1.1rem;
+    font-weight: 500;
+  }
+  
+  form input[type="text"] {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #30363d;
+    border-radius: 4px;
+    background: #0d1117;
+    color: #c9d1d9;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+  }
+  
+  form input[type="text"]::placeholder {
+    color: #8b949e;
+  }
+  
+  form button {
+    width: 100%;
+    padding: 0.75rem;
+    background-color: #238636; /* GitHub accent green */
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.3s ease;
+  }
+  
+  form button:hover {
+    background-color: #2ea043;
+  }
+  
+  /* Button Link on Result Page */
+  a.btn {
+    display: block;      /* Make it block level */
+    width: fit-content;  /* Shrink wrap the button */
+    padding: 0.75rem 1rem;
+    background-color: #238636;
+    color: #ffffff;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 1.1rem;
+    font-weight: 600;
+    transition: background 0.3s ease;
+    margin: 20px auto 0 auto;  /* Center the button and add top margin */
+  }
+  
+  a.btn:hover {
+    background-color: #2ea043;
+  }
+  
+  /* Error Message */
+  .error {
+    color: #f85149;
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+  }
+  
+  /* Loading Overlay Styles */
+  .loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(13, 17, 23, 0.95);
+    z-index: 9999;
+    display: none; /* Hidden by default */
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .loading-overlay p {
+    margin-top: 1rem;
+    font-size: 1.2rem;
+    color: #c9d1d9;
+  }
+  
+  /* Spinner Animation */
+  .spinner {
+    border: 8px solid rgba(255, 255, 255, 0.2);
+    border-top: 8px solid #58a6ff;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1.5s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  

templates/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Manimator - AI Video Generator</title>
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body>
+  <header>
+    <h1>Manimator</h1>
+    <p>Your AI-powered video generator</p>
+  </header>
+  
+  <div class="container">
+    <form id="promptForm" method="POST" action="/">
+      <label for="prompt">Enter your prompt:</label>
+      <input type="text" id="prompt" name="prompt" required autocomplete="off" placeholder="Type something awesome...">
+      <button type="submit">Generate Video</button>
+    </form>
+  </div>
+
+  <!-- Loading overlay (hidden by default) -->
+  <div id="loading" class="loading-overlay">
+    <div class="spinner"></div>
+    <p>Generating your video... please wait</p>
+  </div>
+
+  <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+</html>

templates/result.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Manimator - Your Video is Ready!</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body>
+  <header>
+    <h1>Manimator</h1>
+    <p>Your AI-powered Manim video generator</p>
+  </header>
+
+  <div class="container">
+    <h2>Your Generated Video</h2>
+    {% if error %}
+      <p class="error">{{ error }}</p>
+    {% else %}
+      <video width="100%" height="auto" controls>
+        <source src="{{ video_url }}" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
+    {% endif %}
+    <br>
+    <a class="btn" href="{{ url_for('index') }}">Submit Another Prompt</a>
+  </div>
+</body>
+</html>