forked from Rockachopa/Timmy-time-dashboard
1103da339c
Adds 3 new personas (Pixel, Lyra, Reel) and 5 new tool modules: - Git/DevOps tools (GitPython): clone, status, diff, log, blame, branch, add, commit, push, pull, stash — wired to Forge and Helm personas - Image generation (FLUX via diffusers): text-to-image, storyboards, variations — Pixel persona - Music generation (ACE-Step 1.5): full songs with vocals+instrumentals, instrumental tracks, vocal-only tracks — Lyra persona - Video generation (Wan 2.1 via diffusers): text-to-video, image-to-video clips — Reel persona - Creative Director pipeline: multi-step orchestration that chains storyboard → music → video → assembly into 3+ minute final videos - Video assembler (MoviePy + FFmpeg): stitch clips, overlay audio, title cards, subtitles, final export Also includes: - Spark Intelligence tool-level + creative pipeline event capture - Creative Studio dashboard page (/creative/ui) with 4 tabs - Config settings for all new models and output directories - pyproject.toml creative optional extra for GPU dependencies - 107 new tests covering all modules (624 total, all passing) https://claude.ai/code/session_01KJm6jQkNi3aA3yoQJn636c
199 lines
9.0 KiB
HTML
199 lines
9.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Creative Studio — Mission Control{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h1 class="display-6">Creative Studio</h1>
|
|
<p class="text-secondary">Image, music, and video generation — powered by Pixel, Lyra, and Reel</p>
|
|
</div>
|
|
<div class="col-auto d-flex gap-3">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-body text-center py-2 px-3">
|
|
<h4 class="mb-0">{{ image_count }}</h4>
|
|
<small class="text-secondary">Images</small>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-body text-center py-2 px-3">
|
|
<h4 class="mb-0">{{ music_count }}</h4>
|
|
<small class="text-secondary">Tracks</small>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-body text-center py-2 px-3">
|
|
<h4 class="mb-0">{{ video_count }}</h4>
|
|
<small class="text-secondary">Clips</small>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-body text-center py-2 px-3">
|
|
<h4 class="mb-0">{{ project_count }}</h4>
|
|
<small class="text-secondary">Projects</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<ul class="nav nav-tabs mb-4" role="tablist">
|
|
<li class="nav-item">
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-images" type="button">Images</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-music" type="button">Music</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-video" type="button">Video</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-director" type="button">Director</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
<!-- Images Tab -->
|
|
<div class="tab-pane fade show active" id="tab-images" role="tabpanel">
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-header">
|
|
<strong>Pixel</strong> — Visual Architect (FLUX)
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-secondary small mb-2">Generate images by sending a task to the swarm: <code>"Generate an image of ..."</code></p>
|
|
<p class="text-secondary small">Tools: <span class="badge bg-primary">generate_image</span> <span class="badge bg-primary">generate_storyboard</span> <span class="badge bg-primary">image_variations</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if images %}
|
|
<div class="row g-3">
|
|
{% for img in images %}
|
|
<div class="col-md-3">
|
|
<div class="card bg-dark border-secondary h-100">
|
|
<div class="card-body text-center">
|
|
<small class="text-secondary">{{ img.name }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-secondary">No images generated yet. Send an image generation task to the swarm to get started.</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Music Tab -->
|
|
<div class="tab-pane fade" id="tab-music" role="tabpanel">
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-header">
|
|
<strong>Lyra</strong> — Sound Weaver (ACE-Step 1.5)
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-secondary small mb-2">Generate music by sending a task: <code>"Compose a pop song about ..."</code></p>
|
|
<p class="text-secondary small">Tools: <span class="badge bg-success">generate_song</span> <span class="badge bg-success">generate_instrumental</span> <span class="badge bg-success">generate_vocals</span> <span class="badge bg-success">list_genres</span></p>
|
|
<p class="text-secondary small mb-0">Genres: pop, rock, hip-hop, r&b, jazz, blues, country, electronic, classical, folk, reggae, metal, punk, soul, funk, latin, ambient, lo-fi, cinematic</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if music_files %}
|
|
<div class="list-group">
|
|
{% for track in music_files %}
|
|
<div class="list-group-item bg-dark border-secondary d-flex justify-content-between align-items-center">
|
|
<span>{{ track.name }}</span>
|
|
<audio controls preload="none"><source src="/static/{{ track.path }}" type="audio/wav"></audio>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-secondary">No music tracks generated yet. Send a music generation task to the swarm.</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Video Tab -->
|
|
<div class="tab-pane fade" id="tab-video" role="tabpanel">
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-header">
|
|
<strong>Reel</strong> — Motion Director (Wan 2.1)
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-secondary small mb-2">Generate video clips: <code>"Create a cinematic clip of ..."</code></p>
|
|
<p class="text-secondary small">Tools: <span class="badge bg-warning text-dark">generate_video_clip</span> <span class="badge bg-warning text-dark">image_to_video</span> <span class="badge bg-warning text-dark">stitch_clips</span> <span class="badge bg-warning text-dark">overlay_audio</span></p>
|
|
<p class="text-secondary small mb-0">Resolutions: 480p, 720p | Styles: cinematic, anime, documentary, abstract, timelapse, slow-motion, music-video, vlog</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if videos %}
|
|
<div class="row g-3">
|
|
{% for vid in videos %}
|
|
<div class="col-md-4">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-body text-center">
|
|
<small class="text-secondary">{{ vid.name }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-secondary">No video clips generated yet. Send a video generation task to the swarm.</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Director Tab -->
|
|
<div class="tab-pane fade" id="tab-director" role="tabpanel">
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-header">
|
|
<strong>Creative Director</strong> — Full Pipeline
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-secondary small mb-2">Orchestrate all three creative personas to produce a 3+ minute music video or cinematic short.</p>
|
|
<p class="text-secondary small">Pipeline: <span class="badge bg-info">Script</span> → <span class="badge bg-primary">Storyboard</span> → <span class="badge bg-success">Music</span> → <span class="badge bg-warning text-dark">Video</span> → <span class="badge bg-danger">Assembly</span></p>
|
|
<p class="text-secondary small mb-0">Tools: <span class="badge bg-secondary">create_project</span> <span class="badge bg-secondary">run_storyboard</span> <span class="badge bg-secondary">run_music</span> <span class="badge bg-secondary">run_video_generation</span> <span class="badge bg-secondary">run_assembly</span> <span class="badge bg-secondary">run_full_pipeline</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5 class="mb-3">Projects</h5>
|
|
{% if projects %}
|
|
<div class="row g-3">
|
|
{% for proj in projects %}
|
|
<div class="col-md-6">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-header d-flex justify-content-between">
|
|
<strong>{{ proj.title or proj.id }}</strong>
|
|
<span class="badge {% if proj.status == 'complete' %}bg-success{% elif proj.status == 'failed' %}bg-danger{% else %}bg-info{% endif %}">{{ proj.status }}</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex gap-3 small text-secondary">
|
|
<span>Scenes: {{ proj.scene_count }}</span>
|
|
<span>Storyboard: {{ 'Yes' if proj.has_storyboard else 'No' }}</span>
|
|
<span>Music: {{ 'Yes' if proj.has_music else 'No' }}</span>
|
|
<span>Clips: {{ proj.clip_count }}</span>
|
|
<span>Final: {{ 'Yes' if proj.has_final else 'No' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-secondary">No creative projects yet. Use the swarm to create one: <code>"Create a music video about sunrise over mountains"</code></div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|