Spaces:

allknowingroger
/

Madewithwebsim

Running

App Files Files Community

Madewithwebsim / CCfDV9NKdiBcTZm50.html

allknowingroger

Upload 55 files

ad1dcd6 verified 5 months ago

raw

history blame

6.69 kB

	<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>