AI Studio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Recommended folder structure
src/
├── app/
│   └── studio/
│       ├── layout.tsx      # Studio layout with sidebar
│       ├── page.tsx        # Main generation page
│       ├── video/page.tsx  # Video editor
│       └── assets/page.tsx # Asset library
├── components/
│   ├── studio/
│   │   ├── Sidebar.tsx
│   │   ├── PromptInput.tsx
│   │   ├── StyleSelector.tsx
│   │   └── GenerationGrid.tsx
│   └── video/
│       ├── Timeline.tsx
│       └── VideoPreview.tsx
└── lib/
    └── ai-context.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
"use client";
import { useState } from "react";

interface PromptInputProps {
  onGenerate: (prompt: string, style: string) => void;
  isGenerating: boolean;
}

export function PromptInput({ onGenerate, isGenerating }: PromptInputProps) {
  const [prompt, setPrompt] = useState("");
  const [style, setStyle] = useState("Digital Art");

  const styles = ["Digital Art", "Photorealistic", "Abstract", "Anime", "Oil Painting"];

  return (
    <div className="bg-slate-900 rounded-2xl p-6 border border-slate-800">
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Describe your image..."
        className="w-full h-24 bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-white"
      />

      <div className="flex flex-wrap gap-2 mt-4">
        {styles.map((s) => (
          <button
            key={s}
            onClick={() => setStyle(s)}
            className={`px-4 py-2 rounded-lg text-sm ${
              style === s
                ? "bg-gradient-to-r from-amber-600 to-orange-600 text-white"
                : "bg-slate-800 text-slate-400 border border-slate-700"
            }`}
          >
            {s}
          </button>
        ))}
      </div>

      <button
        onClick={() => onGenerate(prompt, style)}
        disabled={isGenerating || !prompt}
        className="mt-6 px-6 py-2.5 bg-gradient-to-r from-amber-600 to-orange-600 text-white rounded-xl"
      >
        {isGenerating ? "Generating..." : "Generate"}
      </button>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
interface TimelineTrack {
  id: string;
  type: "video" | "audio";
  clips: Clip[];
}

interface Clip {
  id: string;
  name: string;
  start: number;
  duration: number;
  color: string;
}

function Timeline({ tracks }: { tracks: TimelineTrack[] }) {
  return (
    <div className="bg-slate-900 rounded-xl border border-slate-800 p-4">
      <div className="space-y-2">
        {tracks.map((track) => (
          <div key={track.id} className="flex items-center gap-2">
            <span className="w-16 text-xs text-slate-500">{track.type}</span>
            <div className="flex-1 h-12 bg-slate-800 rounded-lg flex gap-1 p-1">
              {track.clips.map((clip) => (
                <div
                  key={clip.id}
                  className={`h-full rounded flex items-center justify-center ${clip.color}`}
                  style={{ width: `${clip.duration}%` }}
                >
                  <span className="text-xs text-white">{clip.name}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}