Hugging Face's logo

Spaces:
Fraser
/
odyssey-frontend
Running

App Files Community
odyssey-frontend
File size: 2,842 Bytes
7ac86fa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
<script lang="ts">
  import { generateSoraVideo } from '$lib/api/openai';
  import type { SoraGenerationParams, SoraGenerationResult } from '$lib/types';

  export let apiKey: string;
  export let params: SoraGenerationParams;
  export let onVideoGenerated: ((result: SoraGenerationResult) => void) | undefined = undefined;
  export let onProgress: ((progress: number) => void) | undefined = undefined;
  export let onError: ((error: string) => void) | undefined = undefined;

  let isGenerating = false;
  let progress = 0;
  let error: string | null = null;
  let statusText = '';

  export async function generate() {
    if (isGenerating) return;

    isGenerating = true;
    progress = 0;
    error = null;
    statusText = 'Creating video generation job...';

    try {
      const result = await generateSoraVideo(
        apiKey,
        params,
        (p) => {
          progress = p;
          statusText = `Generating video: ${Math.round(p)}%`;
          onProgress?.(p);
        }
      );

      statusText = 'Video generated successfully!';
      onVideoGenerated?.(result);
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : 'Unknown error';
      error = errorMsg;
      statusText = 'Generation failed';
      onError?.(errorMsg);
    } finally {
      isGenerating = false;
    }
  }
</script>

{#if isGenerating || error}
  <div class="generator-status">
    {#if isGenerating}
      <div class="status generating">
        <div class="spinner"></div>
        <p>{statusText}</p>
        {#if progress > 0}
          <div class="progress-bar">
            <div class="progress-fill" style="width: {progress}%"></div>
          </div>
        {/if}
      </div>
    {/if}

    {#if error}
      <div class="status error">
        <p>❌ {error}</p>
      </div>
    {/if}
  </div>
{/if}

<style>
  .generator-status {
    padding: 1.5rem;
    margin: 1rem 0;
  }

  .status {
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
  }

  .status.generating {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    color: #1565c0;
  }

  .status.error {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    color: #c62828;
  }

  .status p {
    margin: 0;
    font-weight: 500;
    font-size: 1rem;
  }

  .spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 4px solid #bbdefb;
    border-top-color: #1565c0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .progress-bar {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: #bbdefb;
    border-radius: 4px;
    margin: 1rem auto 0;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: #1565c0;
    transition: width 0.3s ease;
  }
</style>