Hugging Face's logo

Spaces:
usmv3131
/
test
Running

App Files Community
usmv3131 commited on
Commit
614840d
·
verified ·
1 Parent(s): 9cec6e8

переведи на русский - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +242 -18
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🚀
4
- colorFrom: blue
5
- colorTo: green
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: test
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
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,243 @@
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>Modern Text Processor</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ fontFamily: {
15
+ 'inter': ['Inter', 'sans-serif'],
16
+ 'space': ['Space Grotesk', 'sans-serif']
17
+ },
18
+ colors: {
19
+ primary: {
20
+ 50: '#f0f9ff',
21
+ 100: '#e0f2fe',
22
+ 200: '#bae6fd',
23
+ 300: '#7dd3fc',
24
+ 400: '#38bdf8',
25
+ 500: '#0ea5e9',
26
+ 600: '#0284c7',
27
+ 700: '#0369a1',
28
+ 800: '#075985',
29
+ 900: '#0c4a6e',
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ </script>
36
+ <style>
37
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
38
+
39
+ body {
40
+ font-family: 'Inter', sans-serif;
41
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
42
+ min-height: 100vh;
43
+ }
44
+
45
+ .output-bg {
46
+ background: rgba(255, 255, 255, 0.7);
47
+ backdrop-filter: blur(10px);
48
+ border: 1px solid rgba(255, 255, 255, 0.3);
49
+ }
50
+
51
+ .glow-effect {
52
+ box-shadow: 0 0 20px rgba(2, 132, 199, 0.2);
53
+ }
54
+
55
+ .textarea-focus:focus {
56
+ box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
57
+ }
58
+
59
+ .transition-all {
60
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="font-inter">
65
+ <div class="min-h-screen flex flex-col items-center justify-center p-4">
66
+ <div class="max-w-2xl w-full space-y-8">
67
+ <!-- Header -->
68
+ <div class="text-center mb-10" data-aos="fade-down">
69
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-3 font-space">Text Transformer</h1>
70
+ <p class="text-lg text-gray-600 max-w-md mx-auto">Transform your text with modern processing capabilities</p>
71
+ </div>
72
+
73
+ <!-- Input Section -->
74
+ <div class="bg-white rounded-2xl shadow-xl p-6 glow-effect" data-aos="fade-up">
75
+ <div class="flex items-center justify-between mb-4">
76
+ <h2 class="text-xl font-semibold text-gray-800 font-space">Input Text</h2>
77
+ <div class="flex space-x-2">
78
+ <button id="clearBtn" class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors">
79
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
80
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
81
+ </svg>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ <textarea
86
+ id="inputText"
87
+ class="w-full h-40 p-4 text-gray-700 border border-gray-200 rounded-xl focus:outline-none textarea-focus resize-none"
88
+ placeholder="Type or paste your text here..."
89
+ ></textarea>
90
+ <div class="flex flex-wrap gap-2 mt-4">
91
+ <button id="upperCaseBtn" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-all transform hover:scale-105">
92
+ UPPER CASE
93
+ </button>
94
+ <button id="lowerCaseBtn" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-all transform hover:scale-105">
95
+ lower case
96
+ </button>
97
+ <button id="capitalizeBtn" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-all transform hover:scale-105">
98
+ Capitalize
99
+ </button>
100
+ <button id="reverseBtn" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-all transform hover:scale-105">
101
+ Reverse
102
+ </button>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Output Section -->
107
+ <div class="bg-white rounded-2xl shadow-xl p-6 output-bg" data-aos="fade-up" data-aos-delay="100">
108
+ <div class="flex items-center justify-between mb-4">
109
+ <h2 class="text-xl font-semibold text-gray-800 font-space">Processed Text</h2>
110
+ <button id="copyBtn" class="flex items-center space-x-1 px-3 py-1.5 bg-primary-100 text-primary-700 rounded-lg hover:bg-primary-200 transition-colors">
111
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
112
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
113
+ </svg>
114
+ <span>Copy</span>
115
+ </button>
116
+ </div>
117
+ <div id="outputText" class="w-full h-40 p-4 text-gray-700 border border-gray-200 rounded-xl bg-gray-50 overflow-auto">
118
+ <p class="text-gray-400 italic">Your processed text will appear here...</p>
119
+ </div>
120
+ <div class="mt-4 flex justify-between items-center text-sm text-gray-500">
121
+ <span id="charCount">Characters: 0</span>
122
+ <span id="wordCount">Words: 0</span>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Stats Section -->
127
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8" data-aos="fade-up" data-aos-delay="200">
128
+ <div class="bg-white rounded-xl p-5 shadow-lg text-center">
129
+ <div class="text-3xl font-bold text-primary-600 mb-2 font-space" id="totalChars">0</div>
130
+ <div class="text-gray-600">Total Characters</div>
131
+ </div>
132
+ <div class="bg-white rounded-xl p-5 shadow-lg text-center">
133
+ <div class="text-3xl font-bold text-primary-600 mb-2 font-space" id="totalWords">0</div>
134
+ <div class="text-gray-600">Total Words</div>
135
+ </div>
136
+ <div class="bg-white rounded-xl p-5 shadow-lg text-center">
137
+ <div class="text-3xl font-bold text-primary-600 mb-2 font-space" id="transformCount">0</div>
138
+ <div class="text-gray-600">Transformations</div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
145
+ <script>
146
+ // Initialize AOS
147
+ AOS.init({
148
+ duration: 800,
149
+ easing: 'ease-out-cubic'
150
+ });
151
+
152
+ // DOM Elements
153
+ const inputText = document.getElementById('inputText');
154
+ const outputText = document.getElementById('outputText');
155
+ const charCount = document.getElementById('charCount');
156
+ const wordCount = document.getElementById('wordCount');
157
+ const totalChars = document.getElementById('totalChars');
158
+ const totalWords = document.getElementById('totalWords');
159
+ const transformCount = document.getElementById('transformCount');
160
+
161
+ // Buttons
162
+ const clearBtn = document.getElementById('clearBtn');
163
+ const upperCaseBtn = document.getElementById('upperCaseBtn');
164
+ const lowerCaseBtn = document.getElementById('lowerCaseBtn');
165
+ const capitalizeBtn = document.getElementById('capitalizeBtn');
166
+ const reverseBtn = document.getElementById('reverseBtn');
167
+ const copyBtn = document.getElementById('copyBtn');
168
+
169
+ // State
170
+ let transformations = 0;
171
+
172
+ // Update stats
173
+ function updateStats(text) {
174
+ const chars = text.length;
175
+ const words = text.trim() ? text.trim().split(/\s+/).length : 0;
176
+
177
+ charCount.textContent = `Characters: ${chars}`;
178
+ wordCount.textContent = `Words: ${words}`;
179
+ totalChars.textContent = chars;
180
+ totalWords.textContent = words;
181
+ }
182
+
183
+ // Process text functions
184
+ function processText(processor) {
185
+ const text = inputText.value;
186
+ if (!text) return;
187
+
188
+ const processed = processor(text);
189
+ outputText.innerHTML = `<p class="text-gray-800">${processed}</p>`;
190
+ transformations++;
191
+ transformCount.textContent = transformations;
192
+ updateStats(text);
193
+ }
194
+
195
+ // Text processors
196
+ const processors = {
197
+ upper: text => text.toUpperCase(),
198
+ lower: text => text.toLowerCase(),
199
+ capitalize: text => text.split(' ').map(word =>
200
+ word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
201
+ ).join(' '),
202
+ reverse: text => text.split('').reverse().join('')
203
+ };
204
+
205
+ // Event Listeners
206
+ inputText.addEventListener('input', () => {
207
+ updateStats(inputText.value);
208
+ });
209
+
210
+ clearBtn.addEventListener('click', () => {
211
+ inputText.value = '';
212
+ outputText.innerHTML = '<p class="text-gray-400 italic">Your processed text will appear here...</p>';
213
+ updateStats('');
214
+ });
215
+
216
+ upperCaseBtn.addEventListener('click', () => processText(processors.upper));
217
+ lowerCaseBtn.addEventListener('click', () => processText(processors.lower));
218
+ capitalizeBtn.addEventListener('click', () => processText(processors.capitalize));
219
+ reverseBtn.addEventListener('click', () => processText(processors.reverse));
220
+
221
+ copyBtn.addEventListener('click', () => {
222
+ const text = outputText.innerText;
223
+ if (!text || text.includes('Your processed text will appear here')) return;
224
+
225
+ navigator.clipboard.writeText(text).then(() => {
226
+ const originalText = copyBtn.innerHTML;
227
+ copyBtn.innerHTML = `
228
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
229
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
230
+ </svg>
231
+ <span>Copied!</span>
232
+ `;
233
+ setTimeout(() => {
234
+ copyBtn.innerHTML = originalText;
235
+ }, 2000);
236
+ });
237
+ });
238
+
239
+ // Initialize stats
240
+ updateStats('');
241
+ </script>
242
+ </body>
243
  </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ создай простое веб приложение с полем ввода и вывода, ипользуй tailwind, react, framer css, добавь современные modern шрифты
2
+ переведи на русский