Upload 9 files

.gitattributes

@@ -35,3 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 assets/3.jpg filter=lfs diff=lfs merge=lfs -text
 assets/4.jpg filter=lfs diff=lfs merge=lfs -text
+static/assets/3.jpg filter=lfs diff=lfs merge=lfs -text
+static/assets/4.jpg filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,310 @@
+import gradio as gr
+import requests
+import os
+import json
+import time
+from pathlib import Path
+from tempfile import NamedTemporaryFile
+from dotenv import load_dotenv
+from datetime import datetime, timedelta
+
+# Load environment variables
+load_dotenv()
+
+# Configuration
+API_URL = os.getenv("MIRAGIC_API_URL")
+MAX_FREE_TRIALS = 2
+ATTEMPTS_FILE = "user_attempts.json"
+
+class IPTracker:
+    def __init__(self):
+        self.attempts_file = ATTEMPTS_FILE
+        self.attempts = self.load_attempts()
+        
+    def load_attempts(self):
+        try:
+            if Path(self.attempts_file).exists():
+                with open(self.attempts_file, "r") as f:
+                    data = json.load(f)
+                    # Clean old entries (older than 24 hours)
+                    now = datetime.now()
+                    cleaned_data = {}
+                    for ip, info in data.items():
+                        last_attempt = datetime.fromisoformat(info.get("last_attempt", "2000-01-01"))
+                        if now - last_attempt < timedelta(hours=24):
+                            cleaned_data[ip] = info
+                    return cleaned_data
+        except:
+            pass
+        return {}
+    
+    def save_attempts(self):
+        with open(self.attempts_file, "w") as f:
+            json.dump(self.attempts, f, indent=2)
+    
+    def get_attempts(self, ip):
+        if ip not in self.attempts:
+            return 0
+        
+        # Check if 24 hours have passed
+        last_attempt = datetime.fromisoformat(self.attempts[ip]["last_attempt"])
+        if datetime.now() - last_attempt > timedelta(hours=24):
+            self.attempts[ip] = {"count": 0, "last_attempt": datetime.now().isoformat()}
+            self.save_attempts()
+            return 0
+        
+        return self.attempts[ip]["count"]
+    
+    def increment_attempts(self, ip):
+        if ip not in self.attempts:
+            self.attempts[ip] = {"count": 0, "last_attempt": datetime.now().isoformat()}
+        
+        self.attempts[ip]["count"] += 1
+        self.attempts[ip]["last_attempt"] = datetime.now().isoformat()
+        self.save_attempts()
+        return self.attempts[ip]["count"]
+
+# Initialize IP tracker
+ip_tracker = IPTracker()
+
+def get_client_ip(request: gr.Request):
+    """Get client IP address from request"""
+    if request:
+        # Try to get real IP from headers (for proxies)
+        forwarded = request.headers.get("X-Forwarded-For")
+        if forwarded:
+            return forwarded.split(",")[0].strip()
+        
+        real_ip = request.headers.get("X-Real-IP")
+        if real_ip:
+            return real_ip
+        
+        # Fallback to client host
+        return request.client.host if hasattr(request, 'client') else "unknown"
+    return "unknown"
+
+def call_speedpainting_api(image):
+    """Call the Miragic API with proper error handling"""
+    try:
+        with NamedTemporaryFile(suffix=".png") as tmp:
+            image.save(tmp.name)
+            with open(tmp.name, 'rb') as f:
+                files = {'file': f}
+                response = requests.post(API_URL, files=files, timeout=120)
+                
+        if response.status_code == 200:
+            result = response.json()
+            if result.get("status") == "success":
+                video_url = result["link"]
+                if "dl=0" in video_url:
+                    return video_url.replace("dl=0", "raw=1")
+                elif "?dl=" in video_url:
+                    return video_url.split("?dl=")[0] + "?raw=1"
+                return video_url
+            raise gr.Error(f"API error: {result.get('message', 'Unknown error')}")
+        raise gr.Error(f"API request failed with status {response.status_code}")
+    except requests.exceptions.RequestException as e:
+        raise gr.Error(f"Network error: {str(e)}")
+    except Exception as e:
+        raise gr.Error(f"Processing error: {str(e)}")
+
+def generate_speedpainting(image, request: gr.Request):
+    """Generate speedpainting with IP-based limiting"""
+    if not image:
+        raise gr.Error("Please upload an image first!")
+    
+    client_ip = get_client_ip(request)
+    current_attempts = ip_tracker.get_attempts(client_ip)
+    
+    if current_attempts >= MAX_FREE_TRIALS:
+        raise gr.Error(
+            f"You've used {MAX_FREE_TRIALS} free generations today. "
+            f"Please visit https://miragic.ai/ to sign up for unlimited access!"
+        )
+    
+    # Process the image
+    video_url = call_speedpainting_api(image)
+    
+    # Increment attempts after successful generation
+    new_count = ip_tracker.increment_attempts(client_ip)
+    
+    return video_url
+
+def get_remaining_attempts(request: gr.Request):
+    """Get remaining attempts for current IP"""
+    client_ip = get_client_ip(request)
+    current_attempts = ip_tracker.get_attempts(client_ip)
+    remaining = MAX_FREE_TRIALS - current_attempts
+    
+    if remaining <= 0:
+        return f"Daily limit reached ({MAX_FREE_TRIALS}/{MAX_FREE_TRIALS}). Sign up for unlimited access!"
+    else:
+        return f"Remaining free generations: {remaining}/{MAX_FREE_TRIALS}"
+
+# Example images
+EXAMPLE_IMAGES = [
+    ["static/assets/1.jpg"],
+    ["static/assets/2.jpg"],
+    ["static/assets/3.jpg"],
+    ["static/assets/4.jpg"],
+]
+
+# Company information
+COMPANY_INFO = """
+## About US
+### Miragic is a cutting-edge platform to serve AI-powered tools like Virtual Try-on, Speed Painting, Background Remover and Sales Pilot.
+### [Visit our website](https://miragic.ai) to explore more innovative generative AI tools!
+"""
+
+# Custom CSS
+css = """
+footer {visibility: hidden}
+.banner {
+    background-color: #f8f9fa;
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+.input-row {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+.input-column {
+    flex: 1;
+}
+.button-gradient, .signup-button {
+  background: linear-gradient(45deg, #ff416c, #ff4b2b, #ff9b00, #ff416c);
+  background-size: 400% 400%;
+  border: none;
+  padding: 14px 28px;
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.3s ease-in-out;
+  animation: gradientAnimation 2s infinite linear;
+  box-shadow: 0 4px 10px rgba(255, 65, 108, 0.6);
+  text-decoration: none;
+  display: inline-block;
+  margin-top: 10px;
+}
+.signup-button {
+  margin: 0 auto;
+}
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 100% 50%; }
+}
+.button-gradient:hover, .signup-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(255, 75, 43, 0.8);
+}
+.signup-container {
+    text-align: center;
+    padding: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 8px;
+    margin-top: 20px;
+    color: white;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+.signup-container h3 {
+    margin-bottom: 10px;
+    color: white;
+}
+.signup-container p {
+    margin-bottom: 15px;
+    color: #f0f0f0;
+}
+.attempts-counter {
+    background: #e3f2fd;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 10px 0;
+    text-align: center;
+    font-weight: bold;
+    color: #1976d2;
+}
+"""
+
+# Create Gradio interface
+with gr.Blocks(title="Miragic Speed-Painting", theme=gr.themes.Ocean(), css=css) as demo:
+    gr.Markdown("""
+    <div style="display: flex; align-items: center;">
+        <img src="https://avatars.githubusercontent.com/u/211682198?s=200&v=4" style="width: 80px; margin-right: 20px;"/>
+        <div>
+            <h1 style="margin-bottom: 0;">Miragic Speed-Painting 🎨</h1>
+            <p>Upload an image to see AI create speedpainting animations!</p>
+        </div>
+    </div>
+    """)
+    
+    gr.Markdown(COMPANY_INFO)
+    
+    # Usage counter
+    usage_display = gr.HTML(elem_classes="attempts-counter")
+    
+    with gr.Row():
+        with gr.Column():
+            image_input = gr.Image(
+                label="Upload Image",
+                type="pil",
+                sources=["upload", "clipboard"],
+                height=300
+            )
+            
+            gr.Examples(
+                examples=EXAMPLE_IMAGES,
+                inputs=image_input,
+                label="Try these examples!",
+                examples_per_page=4
+            )
+            
+            submit_btn = gr.Button("Generate Speedpainting 🚀", elem_classes="button-gradient")
+        
+        with gr.Column():
+            video_output = gr.Video(
+                label="Speedpainting Result",
+                autoplay=True,
+                format="mp4",
+                height=300
+            )
+            
+            # status_output = gr.Textbox(
+            #     label="Status",
+            #     interactive=False,
+            #     visible=False
+            # )
+            
+            signup_prompt = gr.HTML(
+                visible=True,
+                value="""<div class="signup-container">
+                    <h3>🚀 Want unlimited generations?</h3>
+                    <p>Sign up at Miragic.ai for unlimited access to all our AI tools!</p>
+                    <a href='https://miragic.ai/' target='_blank' class="signup-button">
+                        SignUp for Free 🚀
+                    </a>
+                </div>"""
+            )
+    
+    # Update usage display on page load
+    demo.load(
+        fn=get_remaining_attempts,
+        outputs=usage_display
+    )
+    
+    # Handle generation
+    submit_btn.click(
+        fn=generate_speedpainting,
+        inputs=[image_input],
+        outputs=video_output
+    ).then(
+        fn=get_remaining_attempts,
+        outputs=usage_display
+    )
+
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860)

static/css/style.css

@@ -0,0 +1,339 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.header {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.logo-section {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.logo {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.title-section h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    background: linear-gradient(45deg, #ff416c, #ff4b2b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.title-section p {
+    font-size: 1.1rem;
+    color: #666;
+}
+
+.company-info {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.company-info h2 {
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.company-info p {
+    line-height: 1.6;
+    margin-bottom: 10px;
+}
+
+.company-info a {
+    color: #ff416c;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.company-info a:hover {
+    text-decoration: underline;
+}
+
+.usage-counter {
+    background: rgba(255, 255, 255, 0.9);
+    padding: 15px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    text-align: center;
+    font-weight: bold;
+    color: #1976d2;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.main-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin-bottom: 20px;
+}
+
+.input-section, .output-section {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 15px;
+    padding: 25px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.upload-area {
+    border: 3px dashed #ddd;
+    border-radius: 12px;
+    padding: 40px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-bottom: 20px;
+    position: relative;
+    overflow: hidden;
+}
+
+.upload-area:hover {
+    border-color: #ff416c;
+    background: rgba(255, 65, 108, 0.05);
+}
+
+.upload-area.dragover {
+    border-color: #ff416c;
+    background: rgba(255, 65, 108, 0.1);
+}
+
+.upload-placeholder {
+    pointer-events: none;
+}
+
+.upload-icon {
+    font-size: 3rem;
+    margin-bottom: 15px;
+}
+
+.upload-hint {
+    color: #888;
+    font-size: 0.9rem;
+    margin-top: 10px;
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: 8px;
+    object-fit: contain;
+}
+
+.examples-section {
+    margin-bottom: 20px;
+}
+
+.examples-section h3 {
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.examples-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+
+.example-image {
+    width: 100%;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.example-image:hover {
+    transform: scale(1.05);
+}
+
+.button-gradient {
+    background: linear-gradient(45deg, #ff416c, #ff4b2b, #ff9b00, #ff416c);
+    background-size: 400% 400%;
+    border: none;
+    padding: 15px 30px;
+    font-size: 16px;
+    font-weight: bold;
+    color: white;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    animation: gradientAnimation 3s ease infinite;
+    box-shadow: 0 6px 20px rgba(255, 65, 108, 0.4);
+    width: 100%;
+}
+
+.button-gradient:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(255, 65, 108, 0.6);
+}
+
+.button-gradient:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+@keyframes gradientAnimation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.video-container {
+    position: relative;
+    min-height: 300px;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #f8f9fa;
+}
+
+.result-video {
+    width: 100%;
+    height: 300px;
+    border-radius: 12px;
+    object-fit: contain;
+    background: black;
+}
+
+.video-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    color: #888;
+}
+
+.placeholder-icon {
+    font-size: 3rem;
+    margin-bottom: 15px;
+}
+
+.loading-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    color: #666;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #ff416c;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.signup-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 12px;
+    padding: 25px;
+    margin-top: 20px;
+    color: white;
+    text-align: center;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+}
+
+.signup-container h3 {
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+}
+
+.signup-container p {
+    margin-bottom: 20px;
+    opacity: 0.9;
+}
+
+.signup-button {
+    background: linear-gradient(45deg, #ff416c, #ff4b2b);
+    border: none;
+    padding: 12px 25px;
+    font-size: 16px;
+    font-weight: bold;
+    color: white;
+    border-radius: 8px;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.signup-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.error-message {
+    background: #ff4444;
+    color: white;
+    padding: 15px;
+    border-radius: 8px;
+    margin-top: 20px;
+    text-align: center;
+    font-weight: bold;
+}
+
+@media (max-width: 768px) {
+    .main-content {
+        grid-template-columns: 1fr;
+    }
+    
+    .logo-section {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .title-section h1 {
+        font-size: 2rem;
+    }
+    
+    .examples-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .container {
+        padding: 10px;
+    }
+}

static/js/main.js

@@ -0,0 +1,204 @@
+class SpeedPaintingApp {
+    constructor() {
+        this.initializeElements();
+        this.setupEventListeners();
+        this.checkUsage();
+    }
+
+    initializeElements() {
+        this.uploadArea = document.getElementById('uploadArea');
+        this.imageInput = document.getElementById('imageInput');
+        this.previewImage = document.getElementById('previewImage');
+        this.generateBtn = document.getElementById('generateBtn');
+        this.resultVideo = document.getElementById('resultVideo');
+        this.loadingSpinner = document.getElementById('loadingSpinner');
+        this.videoPlaceholder = document.getElementById('videoPlaceholder');
+        this.signupPrompt = document.getElementById('signupPrompt');
+        this.errorMessage = document.getElementById('errorMessage');
+        this.usageCounter = document.getElementById('usageCounter');
+        this.usageText = document.getElementById('usageText');
+        this.exampleImages = document.querySelectorAll('.example-image');
+        
+        this.selectedFile = null;
+        this.maxAttempts = 2;
+    }
+
+    setupEventListeners() {
+        // Upload area click
+        this.uploadArea.addEventListener('click', () => {
+            this.imageInput.click();
+        });
+
+        // File input change
+        this.imageInput.addEventListener('change', (e) => {
+            this.handleFileSelect(e.target.files[0]);
+        });
+
+        // Drag and drop
+        this.uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            this.uploadArea.classList.add('dragover');
+        });
+
+        this.uploadArea.addEventListener('dragleave', () => {
+            this.uploadArea.classList.remove('dragover');
+        });
+
+        this.uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            this.uploadArea.classList.remove('dragover');
+            this.handleFileSelect(e.dataTransfer.files[0]);
+        });
+
+        // Generate button
+        this.generateBtn.addEventListener('click', () => {
+            this.generateSpeedpainting();
+        });
+
+        // Example images
+        this.exampleImages.forEach(img => {
+            img.addEventListener('click', () => {
+                this.loadExampleImage(img.src);
+            });
+        });
+    }
+
+    handleFileSelect(file) {
+        if (!file) return;
+
+        if (!file.type.startsWith('image/')) {
+            this.showError('Please select a valid image file (JPG, PNG, WebP)');
+            return;
+        }
+
+        this.selectedFile = file;
+        
+        // Show preview
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            this.previewImage.src = e.target.result;
+            this.previewImage.style.display = 'block';
+            this.uploadArea.querySelector('.upload-placeholder').style.display = 'none';
+            this.generateBtn.disabled = false;
+        };
+        reader.readAsDataURL(file);
+    }
+
+    async loadExampleImage(src) {
+        try {
+            const response = await fetch(src);
+            const blob = await response.blob();
+            const file = new File([blob], 'example.jpg', { type: blob.type });
+            this.handleFileSelect(file);
+        } catch (error) {
+            this.showError('Failed to load example image');
+        }
+    }
+
+    async checkUsage() {
+        try {
+            const response = await fetch('/api/usage');
+            const data = await response.json();
+            
+            if (data.remaining <= 0) {
+                this.usageText.textContent = `Daily limit reached (${this.maxAttempts}/${this.maxAttempts}). Sign up for unlimited access!`;
+                this.usageCounter.style.background = '#ffebee';
+                this.usageCounter.style.color = '#c62828';
+                this.generateBtn.disabled = true;
+                this.showSignupPrompt();
+            } else {
+                this.usageText.textContent = `Remaining free generations: ${data.remaining}/${this.maxAttempts}`;
+                this.usageCounter.style.background = '#e3f2fd';
+                this.usageCounter.style.color = '#1976d2';
+            }
+        } catch (error) {
+            this.usageText.textContent = 'Unable to check usage';
+        }
+    }
+
+    async generateSpeedpainting() {
+        if (!this.selectedFile) {
+            this.showError('Please select an image first');
+            return;
+        }
+
+        this.showLoading();
+        this.hideError();
+
+        try {
+            const formData = new FormData();
+            formData.append('image', this.selectedFile);
+
+            const response = await fetch('/api/generate', {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Generation failed');
+            }
+
+            if (data.success) {
+                this.showVideo(data.video_url);
+                this.checkUsage(); // Update usage counter
+                
+                if (data.remaining <= 0) {
+                    this.showSignupPrompt();
+                }
+            } else {
+                throw new Error(data.error || 'Generation failed');
+            }
+
+        } catch (error) {
+            this.showError(error.message);
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    showLoading() {
+        this.loadingSpinner.style.display = 'flex';
+        this.videoPlaceholder.style.display = 'none';
+        this.resultVideo.style.display = 'none';
+        this.generateBtn.disabled = true;
+        this.generateBtn.textContent = 'Generating...';
+    }
+
+    hideLoading() {
+        this.loadingSpinner.style.display = 'none';
+        this.generateBtn.disabled = false;
+        this.generateBtn.textContent = 'Generate Speedpainting 🚀';
+    }
+
+    showVideo(videoUrl) {
+        this.resultVideo.src = videoUrl;
+        this.resultVideo.style.display = 'block';
+        this.videoPlaceholder.style.display = 'none';
+        this.resultVideo.load();
+    }
+
+    showSignupPrompt() {
+        this.signupPrompt.style.display = 'block';
+    }
+
+    showError(message) {
+        this.errorMessage.textContent = message;
+        this.errorMessage.style.display = 'block';
+        
+        // Auto hide error after 5 seconds
+        setTimeout(() => {
+            this.hideError();
+        }, 5000);
+    }
+
+    hideError() {
+        this.errorMessage.style.display = 'none';
+    }
+}
+
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new SpeedPaintingApp();
+});

templates/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Miragic Speed-Painting</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="logo-section">
+                <img src="https://avatars.githubusercontent.com/u/211682198?s=200&v=4" alt="Miragic Logo" class="logo">
+                <div class="title-section">
+                    <h1>Miragic Speed-Painting 🎨</h1>
+                    <p>Upload an image to see AI create speedpainting animations!</p>
+                </div>
+            </div>
+        </header>
+
+        <section class="company-info">
+            <h2>About US</h2>
+            <p>Miragic is a cutting-edge platform to serve AI-powered tools like Virtual Try-on, Speed Painting, Background Remover and Sales Pilot.</p>
+            <p><a href="https://miragic.ai" target="_blank">Visit our website</a> to explore more innovative generative AI tools!</p>
+        </section>
+
+        <div class="usage-counter" id="usageCounter">
+            <span id="usageText">Checking usage...</span>
+        </div>
+
+        <div class="main-content">
+            <div class="input-section">
+                <div class="upload-area" id="uploadArea">
+                    <input type="file" id="imageInput" accept="image/*" hidden>
+                    <div class="upload-placeholder">
+                        <div class="upload-icon">📷</div>
+                        <p>Click to upload or drag and drop an image</p>
+                        <p class="upload-hint">Supports JPG, PNG, WebP</p>
+                    </div>
+                    <img id="previewImage" class="preview-image" style="display: none;">
+                </div>
+
+                <div class="examples-section">
+                    <h3>Try these examples!</h3>
+                    <div class="examples-grid">
+                        <img src="/static/assets/1.jpg" alt="Example 1" class="example-image">
+                        <img src="/static/assets/2.jpg" alt="Example 2" class="example-image">
+                        <img src="/static/assets/3.jpg" alt="Example 3" class="example-image">
+                        <img src="/static/assets/4.jpg" alt="Example 4" class="example-image">
+                    </div>
+                </div>
+
+                <button id="generateBtn" class="button-gradient" disabled>
+                    Generate Speedpainting 🚀
+                </button>
+            </div>
+
+            <div class="output-section">
+                <div class="video-container">
+                    <video id="resultVideo" class="result-video" controls style="display: none;">
+                        Your browser does not support the video tag.
+                    </video>
+                    <div id="loadingSpinner" class="loading-spinner" style="display: none;">
+                        <div class="spinner"></div>
+                        <p>Generating your speedpainting...</p>
+                    </div>
+                    <div id="videoPlaceholder" class="video-placeholder">
+                        <div class="placeholder-icon">🎬</div>
+                        <p>Your speedpainting video will appear here</p>
+                    </div>
+                </div>
+
+                <div id="signupPrompt" class="signup-container" style="display: none;">
+                    <h3>🚀 Want unlimited generations?</h3>
+                    <p>You've reached your daily limit. Sign up at Miragic.ai for unlimited access to all our AI tools!</p>
+                    <a href="https://miragic.ai/" target="_blank" class="signup-button">
+                        SignUp for Free 🚀
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div id="errorMessage" class="error-message" style="display: none;"></div>
+    </div>
+
+    <script src="/static/js/main.js"></script>
+</body>
+</html>

user_attempts.json

@@ -0,0 +1,2 @@
+{
+}