Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 6,687 Bytes 
ad1dcd6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
 
<html><head><base href="https://gradio.app/claude/translation">
<title>Claude Translation Demo - Gradio</title>
<style>
  body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f4f4f4;
  }
  
  header {
    background-color: #ff7c00;
    color: white;
    text-align: center;
    padding: 1em;
    margin-bottom: 2em;
    border-radius: 8px;
  }
  
  h1, h2, h3 {
    color: #ff7c00;
  }
  
  .container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .gradio-app {
    border: 2px solid #ff7c00;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
  }
  
  .gradio-input, .gradio-output {
    margin-bottom: 15px;
  }
  
  .gradio-input textarea, .gradio-input select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  
  .gradio-button {
    background-color: #ff7c00;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .gradio-output {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    min-height: 100px;
  }
  
  .info-box {
    background-color: #e8f4fd;
    border-left: 4px solid #1184e8;
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .example-section {
    margin-top: 20px;
  }
  
  .example-item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  
  .example-item:hover {
    background-color: #e0e0e0;
  }
</style>
</head>
<body>
  <header>
    <h1>Claude Translation Demo</h1>
    <p>Powered by Anthropic's Claude AI and Gradio</p>
  </header>
  
  <div class="container">
    <h2>AI-Powered Language Translation</h2>
    <p>Experience the power of Claude's multilingual capabilities. This demo showcases Claude's ability to translate text between various languages with high accuracy and natural-sounding results.</p>
    
    <div class="info-box">
      <p><strong>Note:</strong> This is a simulated demo. In a real implementation, translations would be processed by Claude's AI model.</p>
    </div>
    
    <div class="gradio-app">
      <div class="gradio-input">
        <textarea placeholder="Enter text to translate..." rows="5"></textarea>
        <select id="source-lang">
          <option value="auto">Detect Language</option>
          <option value="en">English</option>
          <option value="es">Spanish</option>
          <option value="fr">French</option>
          <option value="de">German</option>
          <option value="it">Italian</option>
          <option value="ja">Japanese</option>
          <option value="ko">Korean</option>
          <option value="zh">Chinese (Simplified)</option>
        </select>
        <select id="target-lang">
          <option value="en">English</option>
          <option value="es">Spanish</option>
          <option value="fr">French</option>
          <option value="de">German</option>
          <option value="it">Italian</option>
          <option value="ja">Japanese</option>
          <option value="ko">Korean</option>
          <option value="zh">Chinese (Simplified)</option>
        </select>
      </div>
      <button class="gradio-button">Translate</button>
      <div class="gradio-output">
        <p>Translation will appear here...</p>
      </div>
    </div>
    
    <div class="example-section">
      <h3>Try these examples:</h3>
      <div class="example-item" data-text="Bonjour, comment allez-vous aujourd'hui?" data-source="fr" data-target="en">
        French to English: "Bonjour, comment allez-vous aujourd'hui?"
      </div>
      <div class="example-item" data-text="The quick brown fox jumps over the lazy dog." data-source="en" data-target="es">
        English to Spanish: "The quick brown fox jumps over the lazy dog."
      </div>
      <div class="example-item" data-text="γ“γ‚“γ«γ‘γ―γ€γŠε…ƒζ°—γ§γ™γ‹οΌŸ" data-source="ja" data-target="en">
        Japanese to English: "γ“γ‚“γ«γ‘γ―γ€γŠε…ƒζ°—γ§γ™γ‹οΌŸ"
      </div>
    </div>
  </div>
  
  <div class="container">
    <h2>About Claude's Translation Capabilities</h2>
    <p>Claude is a state-of-the-art AI language model developed by Anthropic. It has been trained on a vast corpus of multilingual data, enabling it to perform high-quality translations across numerous language pairs. Some key features of Claude's translation abilities include:</p>
    <ul>
      <li>Support for over 100 languages</li>
      <li>Context-aware translations that capture nuances and idiomatic expressions</li>
      <li>Ability to maintain tone and style in translations</li>
      <li>Handling of specialized terminology in various fields (e.g., legal, medical, technical)</li>
      <li>Real-time translation capabilities</li>
    </ul>
  </div>
  
  <script>
    // This script simulates the translation functionality
    document.querySelector('.gradio-button').addEventListener('click', function() {
      var input = document.querySelector('.gradio-input textarea').value;
      var sourceLang = document.querySelector('#source-lang').value;
      var targetLang = document.querySelector('#target-lang').value;
      
      // Simulate translation (in reality, this would call Claude's API)
      var translation = simulateTranslation(input, sourceLang, targetLang);
      
      document.querySelector('.gradio-output p').textContent = translation;
    });
    
    // Example click handlers
    document.querySelectorAll('.example-item').forEach(function(example) {
      example.addEventListener('click', function() {
        document.querySelector('.gradio-input textarea').value = this.dataset.text;
        document.querySelector('#source-lang').value = this.dataset.source;
        document.querySelector('#target-lang').value = this.dataset.target;
      });
    });
    
    function simulateTranslation(text, sourceLang, targetLang) {
      // This is a very basic simulation
      var translations = {
        "Bonjour, comment allez-vous aujourd'hui?": "Hello, how are you today?",
        "The quick brown fox jumps over the lazy dog.": "El zorro marrΓ³n rΓ‘pido salta sobre el perro perezoso.",
        "γ“γ‚“γ«γ‘γ―γ€γŠε…ƒζ°—γ§γ™γ‹οΌŸ": "Hello, how are you?"
      };
      
      return translations[text] || "Translation not available in this demo. In a real implementation, Claude would provide an accurate translation here.";
    }
  </script>
</body>
</html>