Hugging Face's logo

Spaces:
rote1
/
roterote
Running

App Files Community
rote1 commited on
Commit
dd5f033
·
verified ·
1 Parent(s): 0558dac

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +233 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Roterote
3
- emoji: 📈
4
  colorFrom: gray
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: roterote
3
+ emoji: 🐳
4
  colorFrom: gray
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,233 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ROTE PROJECT - Actor's Dialogue Trainer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @keyframes bob {
10
+ 0%, 100% { transform: translateY(0); }
11
+ 50% { transform: translateY(-5px); }
12
+ }
13
+ .cockatoo-pixel {
14
+ image-rendering: pixelated;
15
+ animation: bob 1s infinite ease-in-out;
16
+ }
17
+ .redacted {
18
+ background-color: #333;
19
+ color: transparent;
20
+ border-radius: 3px;
21
+ cursor: pointer;
22
+ transition: all 0.2s ease;
23
+ }
24
+ .redacted:hover {
25
+ background-color: #444;
26
+ }
27
+ .redacted.revealed {
28
+ background-color: transparent;
29
+ color: inherit;
30
+ }
31
+ .redacted.first-letter {
32
+ background-color: #333;
33
+ color: transparent;
34
+ }
35
+ .redacted.first-letter::first-letter {
36
+ color: white;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
41
+ <!-- Navigation -->
42
+ <nav class="bg-gray-800 p-4 flex justify-between items-center">
43
+ <div class="flex items-center space-x-2">
44
+ <h1 class="text-xl font-bold text-yellow-400">ROTE PROJECT</h1>
45
+ <span class="text-sm text-gray-400">Actor's Dialogue Trainer</span>
46
+ </div>
47
+ <div class="flex space-x-4">
48
+ <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded">Login</button>
49
+ <button class="px-4 py-2 bg-yellow-600 hover:bg-yellow-500 rounded">Sign Up</button>
50
+ </div>
51
+ </nav>
52
+
53
+ <!-- Main Content -->
54
+ <main class="flex flex-1">
55
+ <!-- Sidebar -->
56
+ <aside class="w-64 bg-gray-800 p-4 hidden md:block">
57
+ <div class="mb-6">
58
+ <h2 class="text-lg font-semibold mb-2">My Scenes</h2>
59
+ <ul class="space-y-1">
60
+ <li class="p-2 hover:bg-gray-700 rounded cursor-pointer">Hamlet Act 1</li>
61
+ <li class="p-2 hover:bg-gray-700 rounded cursor-pointer">Romeo & Juliet</li>
62
+ <li class="p-2 hover:bg-gray-700 rounded cursor-pointer">Death of a Salesman</li>
63
+ </ul>
64
+ <button class="mt-2 w-full py-2 bg-gray-700 hover:bg-gray-600 rounded">+ New Scene</button>
65
+ </div>
66
+
67
+ <div class="mb-6">
68
+ <h2 class="text-lg font-semibold mb-2">Practice Tools</h2>
69
+ <button class="w-full py-2 px-4 mb-2 bg-gray-700 hover:bg-gray-600 rounded text-left">Redaction</button>
70
+ <button class="w-full py-2 px-4 mb-2 bg-gray-700 hover:bg-gray-600 rounded text-left">AI Coach</button>
71
+ <button class="w-full py-2 px-4 bg-gray-700 hover:bg-gray-600 rounded text-left">Recordings</button>
72
+ </div>
73
+
74
+ <div class="mt-8 pt-4 border-t border-gray-700">
75
+ <div class="flex justify-center">
76
+ <!-- Cockatoo Mascot (static version) -->
77
+ <div class="cockatoo-pixel w-16 h-16"></div>
78
+ </div>
79
+ <p class="text-center text-xs text-gray-400 mt-2">Your practice companion</p>
80
+ </div>
81
+ </aside>
82
+
83
+ <!-- Scene Workspace -->
84
+ <section class="flex-1 p-6">
85
+ <div class="max-w-4xl mx-auto">
86
+ <!-- Scene Title -->
87
+ <div class="mb-6">
88
+ <input type="text" value="Hamlet - Act 3, Scene 1"
89
+ class="w-full text-2xl font-bold bg-transparent border-b border-gray-700 focus:border-yellow-500 outline-none pb-2">
90
+ </div>
91
+
92
+ <!-- Scene Controls -->
93
+ <div class="flex flex-wrap gap-2 mb-6">
94
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">Upload Script</button>
95
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">Redact All</button>
96
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">Show All</button>
97
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">First Letters</button>
98
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">Record Audio</button>
99
+ <button class="px-4 py-2 bg-yellow-700 hover:bg-yellow-600 rounded">AI Coach</button>
100
+ </div>
101
+
102
+ <!-- Scene Text -->
103
+ <div class="bg-gray-800 p-6 rounded-lg mb-6">
104
+ <div class="mb-4">
105
+ <span class="font-semibold text-yellow-400">HAMLET</span>
106
+ <p class="mt-1 text-lg leading-relaxed">
107
+ <span class="redacted">To</span> <span class="redacted">be,</span> <span class="redacted">or</span> <span class="redacted">not</span> <span class="redacted">to</span> <span class="redacted">be:</span> <span class="redacted">that</span> <span class="redacted">is</span> <span class="redacted">the</span> <span class="redacted">question:</span>
108
+ </p>
109
+ </div>
110
+ <div class="mb-4">
111
+ <span class="font-semibold text-yellow-400">HAMLET</span>
112
+ <p class="mt-1 text-lg leading-relaxed">
113
+ <span class="redacted first-letter">Whether</span> <span class="redacted first-letter">'tis</span> <span class="redacted first-letter">nobler</span> <span class="redacted first-letter">in</span> <span class="redacted first-letter">the</span> <span class="redacted first-letter">mind</span> <span class="redacted first-letter">to</span> <span class="redacted first-letter">suffer</span>
114
+ </p>
115
+ </div>
116
+ <div>
117
+ <span class="font-semibold text-yellow-400">HAMLET</span>
118
+ <p class="mt-1 text-lg leading-relaxed">
119
+ <span class="redacted revealed">The</span> <span class="redacted">slings</span> <span class="redacted">and</span> <span class="redacted">arrows</span> <span class="redacted">of</span> <span class="redacted">outrageous</span> <span class="redacted">fortune,</span>
120
+ </p>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Redaction Controls -->
125
+ <div class="flex justify-center space-x-4 mb-8">
126
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold"><<</button>
127
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold"><</button>
128
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold">></button>
129
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold">>></button>
130
+ </div>
131
+
132
+ <!-- Loading Indicator -->
133
+ <div id="loadingIndicator" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
134
+ <div class="text-center">
135
+ <div class="cockatoo-pixel w-32 h-32 mx-auto"></div>
136
+ <p class="mt-4 text-xl">Processing your scene...</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+ </main>
142
+
143
+ <!-- Footer -->
144
+ <footer class="bg-gray-800 p-4 text-center text-sm text-gray-400">
145
+ <p>ROTE PROJECT © 2023 - Helping actors master their lines with confidence</p>
146
+ </footer>
147
+
148
+ <script>
149
+ // Render the 16-bit cockatoo
150
+ document.addEventListener('DOMContentLoaded', function() {
151
+ const cockatoo = document.querySelector('.cockatoo-pixel');
152
+ const canvas = document.createElement('canvas');
153
+ canvas.width = 16;
154
+ canvas.height = 16;
155
+ canvas.style.width = '100%';
156
+ canvas.style.height = '100%';
157
+ cockatoo.appendChild(canvas);
158
+
159
+ const ctx = canvas.getContext('2d');
160
+
161
+ // 16x16 pixel map
162
+ const pixelMap = [
163
+ "................",
164
+ ".....YYY........",
165
+ ".....YYY........",
166
+ ".....WWWYYY.....",
167
+ ".....WWWWWW.....",
168
+ "....WWWWWWWW....",
169
+ "...WWWWWWWWWW....",
170
+ "...WWWWWWWWWW....",
171
+ "...WWWWWWWWWW....",
172
+ "...WWWWWWWWW.....",
173
+ "....WWWWWWWW.....",
174
+ "......B.BB.......",
175
+ ".....OO..OO......",
176
+ "................",
177
+ "................",
178
+ "................"
179
+ ];
180
+
181
+ const colorMap = {
182
+ '.': 'rgba(0,0,0,0)',
183
+ 'Y': '#FFFF00',
184
+ 'W': '#FFFFFF',
185
+ 'B': '#000000',
186
+ 'O': '#FFAA00'
187
+ };
188
+
189
+ // Draw the cockatoo
190
+ for (let y = 0; y < pixelMap.length; y++) {
191
+ for (let x = 0; x < pixelMap[y].length; x++) {
192
+ ctx.fillStyle = colorMap[pixelMap[y][x]] || '#FF00FF';
193
+ ctx.fillRect(x, y, 1, 1);
194
+ }
195
+ }
196
+
197
+ // Redaction interaction
198
+ document.querySelectorAll('.redacted').forEach(el => {
199
+ el.addEventListener('click', function() {
200
+ this.classList.toggle('revealed');
201
+ });
202
+
203
+ el.addEventListener('mouseenter', function() {
204
+ if (!this.classList.contains('revealed') && !this.classList.contains('first-letter')) {
205
+ this.classList.add('hovered');
206
+ }
207
+ });
208
+
209
+ el.addEventListener('mouseleave', function() {
210
+ this.classList.remove('hovered');
211
+ });
212
+ });
213
+
214
+ // Simulate loading for demo purposes
215
+ document.querySelectorAll('button').forEach(btn => {
216
+ btn.addEventListener('click', function() {
217
+ if (this.textContent.includes('AI Coach') || this.textContent.includes('Upload')) {
218
+ const loader = document.getElementById('loadingIndicator');
219
+ loader.classList.remove('hidden');
220
+
221
+ setTimeout(() => {
222
+ loader.classList.add('hidden');
223
+ if (this.textContent.includes('AI Coach')) {
224
+ alert("AI Coach: Focus on the existential dilemma in Hamlet's voice. Try emphasizing 'question' in the first line.");
225
+ }
226
+ }, 2000);
227
+ }
228
+ });
229
+ });
230
+ });
231
+ </script>
232
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rote1/roterote" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
233
+ </html>