Code Translator

import { APIKeyInput } from '@/components/APIKeyInput'; import { CodeBlock } from '@/components/CodeBlock'; import { LanguageSelect } from '@/components/LanguageSelect'; import { ModelSelect } from '@/components/ModelSelect'; import { TextBlock } from '@/components/TextBlock'; import { OpenAIModel, TranslateBody } from '@/types/types'; import Head from 'next/head'; import { useEffect, useState } from 'react'; export default function Home() { const [inputLanguage, setInputLanguage] = useState('JavaScript'); const [outputLanguage, setOutputLanguage] = useState('Python'); const [inputCode, setInputCode] = useState(''); const [outputCode, setOutputCode] = useState(''); const [model, setModel] = useState('gpt-3.5-turbo'); const [loading, setLoading] = useState(false); const [hasTranslated, setHasTranslated] = useState(false); const [apiKey, setApiKey] = useState(''); const handleTranslate = async () => { const maxCodeLength = model === 'gpt-3.5-turbo' ? 6000 : 12000; if (!apiKey) { alert('Please enter an API key.'); return; } if (inputLanguage === outputLanguage) { alert('Please select different languages.'); return; } if (!inputCode) { alert('Please enter some code.'); return; } if (inputCode.length > maxCodeLength) { alert( `Please enter code less than ${maxCodeLength} characters. You are currently at ${inputCode.length} characters.`, ); return; } setLoading(true); setOutputCode(''); const controller = new AbortController(); const body: TranslateBody = { inputLanguage, outputLanguage, inputCode, model, apiKey, }; const response = await fetch('/api/translate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, signal: controller.signal, body: JSON.stringify(body), }); if (!response.ok) { setLoading(false); alert('Something went wrong.'); return; } const data = response.body; if (!data) { setLoading(false); alert('Something went wrong.'); return; } const reader = data.getReader(); const decoder = new TextDecoder(); let done = false; let code = ''; while (!done) { const { value, done: doneReading } = await reader.read(); done = doneReading; const chunkValue = decoder.decode(value); code += chunkValue; setOutputCode((prevCode) => prevCode + chunkValue); } setLoading(false); setHasTranslated(true); copyToClipboard(code); }; const copyToClipboard = (text: string) => { const el = document.createElement('textarea'); el.value = text; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }; const handleApiKeyChange = (value: string) => { setApiKey(value); localStorage.setItem('apiKey', value); }; useEffect(() => { if (hasTranslated) { handleTranslate(); } }, [outputLanguage]); useEffect(() => { const apiKey = localStorage.getItem('apiKey'); if (apiKey) { setApiKey(apiKey); } }, []); return ( <> Code Translator

AI Code Translator

setModel(value)} />

{loading ? 'Translating...' : hasTranslated ? 'Output copied to clipboard!' : 'Enter some code and click "Translate"'}

Input

{ setInputLanguage(value); setHasTranslated(false); setInputCode(''); setOutputCode(''); }} /> {inputLanguage === 'Natural Language' ? ( { setInputCode(value); setHasTranslated(false); }} /> ) : ( { setInputCode(value); setHasTranslated(false); }} /> )}

Output

{ setOutputLanguage(value); setOutputCode(''); }} /> {outputLanguage === 'Natural Language' ? ( ) : ( )}

); }