Japanese to Hindi Subtitle Translator

🚨 Oops! Something went wrong.

Please try reloading the page or check your internet connection.

\n );\n }\n\n return <>{children};\n}\n\nfunction VideoTranslatorApp() {\n const [videoUrl, setVideoUrl] = useState(\"https://youtu.be/SRa3c5_PajA\");\n const [translatedSubtitles, setTranslatedSubtitles] = useState([]);\n const [originalSubtitles, setOriginalSubtitles] = useState([]);\n const [sourceLanguage, setSourceLanguage] = useState<\"ja\" | \"en\">(\"ja\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const handleTranslate = async () => {\n if (!videoUrl) {\n setError(\"Please enter a valid video URL\");\n return;\n }\n\n const { type, id } = extractVideoInfo(videoUrl);\n if (!id) {\n setError(\"Invalid video URL. Please provide a valid YouTube or Vimeo link.\");\n return;\n }\n\n setIsLoading(true);\n setError(null);\n\n try {\n const { subtitles, language } = await fetchSubtitles(videoUrl);\n setSourceLanguage(language);\n setOriginalSubtitles(subtitles);\n\n const translated = await translateSubtitles(subtitles, language);\n setTranslatedSubtitles(translated);\n } catch (err) {\n console.error(\"Translation error:\", err);\n setError(\"Translation failed. Using default translations.\");\n setTranslatedSubtitles(originalSubtitles);\n } finally {\n setIsLoading(false);\n }\n };\n\n const downloadSubtitles = (type: \"translated\" | \"original\") => {\n const subtitlesToDownload = type === \"translated\" ? translatedSubtitles : originalSubtitles;\n const subtitlesText = subtitlesToDownload.join(\"\\n\\n\");\n const blob = new Blob([subtitlesText], { type: \"text/plain\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = `${type}_subtitles.txt`;\n link.click();\n };\n\n // Trigger translation on initial load\n useEffect(() => {\n handleTranslate();\n }, []);\n\n return (\n \n \n \n \n 🎬 Japanese to Hindi Video Subtitle Translator\n \n\n

\n setVideoUrl(e.target.value)}\n placeholder=\"Enter YouTube or Vimeo Video URL\"\n style={{\n flex: 1,\n padding: \"10px\",\n fontSize: \"16px\",\n borderRadius: \"5px\",\n border: \"1px solid #ddd\",\n }}\n />\n\n \n {isLoading ? \"Translating...\" : \"Translate Subtitles\"}\n \n

\n\n {error && (\n \n {error}\n \n )}\n\n {originalSubtitles.length > 0 && (\n \n \n

\n {sourceLanguage === \"ja\" ? \"🇯🇵 Original Japanese Subtitles\" : \"🇬🇧 Original English Subtitles\"}\n

\n downloadSubtitles(\"original\")}\n style={{\n backgroundColor: \"#2196F3\",\n color: \"white\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n }}\n >\n Download\n \n \n {originalSubtitles.map((subtitle, index) => (\n

{subtitle}

\n ))}\n \n )}\n\n {translatedSubtitles.length > 0 && (\n \n \n

🇮🇳 Translated Hindi Subtitles

\n downloadSubtitles(\"translated\")}\n style={{\n backgroundColor: \"#FF9800\",\n color: \"white\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n }}\n >\n Download\n \n \n {translatedSubtitles.map((subtitle, index) => (\n

{subtitle}

\n ))}\n \n )}\n\n \n 🚨 Note: Subtitle translation is AI-powered and may not be 100% accurate.\n
\n Supports Japanese and English to Hindi translation\n
\n \n View Source Code\n \n

\n \n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request) {\n return new Response(\n `\n \n \n Japanese to Hindi Subtitle Translator\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1739699534586],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","GAURAV0182","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0N0lLYTFxemxHc2RROTVBSUh1SThENWlHeiJ9","forkedVal","interval","slug","GAURAV0182/autoSubtitleApp","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[140,143,146],{"_117":90,"_141":-5,"_115":142,"_112":110},"prId",["D",1739699534586],{"_117":123,"_141":-5,"_115":144,"_112":145},["D",1739699320334],"338eaf74-ec4b-11ef-bdda-e6cdfca9ef9f",{"_117":31,"_141":-5,"_115":147,"_112":148},["D",1739698374990],"00178bcc-ec49-11ef-80af-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":156,"_157":158,"_94":159},"single","redirect","/v/GAURAV0182/autoSubtitleApp/versions",{"_112":145,"_113":160,"_117":123,"_115":161,"_162":99,"_100":101,"_107":108,"_128":129,"_11":96,"_163":-5,"_164":-5,"_165":-5,"_153":26,"_134":135},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\n\nfunction extractVideoInfo(url: string): { type: string; id: string | null } {\n const youtubeRegex =\n /(?:https?:\\/\\/)?(?:www\\.)?(?:youtube\\.com\\/(?:[^\\/\\n\\s]+\\/\\S+\\/|(?:v|e(?:mbed)?)\\/|\\S*?[?&]v=)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/;\n const vimeoRegex = /(?:https?:\\/\\/)?(?:www\\.)?(?:vimeo\\.com\\/)(\\d+)/;\n\n const youtubeMatch = url.match(youtubeRegex);\n const vimeoMatch = url.match(vimeoRegex);\n\n if (youtubeMatch) {\n return { type: \"youtube\", id: youtubeMatch[1] };\n } else if (vimeoMatch) {\n return { type: \"vimeo\", id: vimeoMatch[1] };\n }\n\n return { type: \"unknown\", id: null };\n}\n\nasync function translateSubtitles(\n subtitles: string[],\n sourceLanguage: \"ja\" | \"en\" = \"ja\",\n targetLanguage = \"hi\",\n) {\n const openai = new OpenAI();\n const translatedSubtitles: string[] = [];\n\n for (const subtitle of subtitles) {\n try {\n const response = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n `You are a professional subtitle translator specializing in Japanese to Hindi translation. Translate the following subtitle from ${\n sourceLanguage === \"ja\" ? \"Japanese\" : \"English\"\n } to Hindi, preserving original meaning, nuance, and context.`,\n },\n {\n role: \"user\",\n content: subtitle,\n },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n const translatedText = response.choices[0]?.message?.content?.trim() || subtitle;\n translatedSubtitles.push(translatedText);\n } catch (error) {\n console.error(\"Subtitle translation error:\", error);\n translatedSubtitles.push(subtitle);\n }\n }\n\n return translatedSubtitles;\n}\n\nasync function fetchSubtitles(videoUrl: string): Promise<{ subtitles: string[]; language: \"ja\" | \"en\" }> {\n const { type, id } = extractVideoInfo(videoUrl);\n\n // Hardcoded Japanese video subtitles for demonstration\n if (type === \"youtube\" && id === \"SRa3c5_PajA\") {\n return {\n subtitles: [\n \"こんにちは、みなさん。これは日本語の字幕の例です。\",\n \"人工知能は私たちの生活を大きく変えています。\",\n \"テクノロジーの進歩は驚くべきスピードで進んでいます。\",\n \"私たちは新しい可能性を探求しています。\",\n \"未来は私たちの想像力次第です。\",\n ],\n language: \"ja\",\n };\n }\n\n // Fallback English subtitles\n return {\n subtitles: [\n \"Hello, everyone. This is an example of subtitles.\",\n \"Artificial intelligence is changing our lives dramatically.\",\n \"Technological progress is moving at an incredible speed.\",\n \"We are exploring new possibilities.\",\n \"The future depends on our imagination.\",\n ],\n language: \"en\",\n };\n}\n\nfunction VideoTranslatorApp() {\n const [videoUrl, setVideoUrl] = useState(\"https://youtu.be/SRa3c5_PajA\");\n const [translatedSubtitles, setTranslatedSubtitles] = useState([]);\n const [originalSubtitles, setOriginalSubtitles] = useState([]);\n const [sourceLanguage, setSourceLanguage] = useState<\"ja\" | \"en\">(\"ja\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const handleTranslate = async () => {\n if (!videoUrl) {\n setError(\"Please enter a valid video URL\");\n return;\n }\n\n const { type, id } = extractVideoInfo(videoUrl);\n if (!id) {\n setError(\"Invalid video URL. Please provide a valid YouTube or Vimeo link.\");\n return;\n }\n\n setIsLoading(true);\n setError(null);\n\n try {\n const { subtitles, language } = await fetchSubtitles(videoUrl);\n setSourceLanguage(language);\n setOriginalSubtitles(subtitles);\n\n const translated = await translateSubtitles(subtitles, language);\n setTranslatedSubtitles(translated);\n } catch (err) {\n setError(\"Translation failed. Using default translations.\");\n setTranslatedSubtitles(originalSubtitles);\n } finally {\n setIsLoading(false);\n }\n };\n\n const downloadSubtitles = (type: \"translated\" | \"original\") => {\n const subtitlesToDownload = type === \"translated\" ? translatedSubtitles : originalSubtitles;\n const subtitlesText = subtitlesToDownload.join(\"\\n\\n\");\n const blob = new Blob([subtitlesText], { type: \"text/plain\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = `${type}_subtitles.txt`;\n link.click();\n };\n\n // Trigger translation on initial load\n React.useEffect(() => {\n handleTranslate();\n }, []);\n\n return (\n \n \n \n 🎬 Japanese to Hindi Video Subtitle Translator\n \n\n

\n\n {error && (\n \n {error}\n \n )}\n\n {originalSubtitles.length > 0 && (\n \n \n

\n {sourceLanguage === \"ja\" ? \"🇯🇵 Original Japanese Subtitles\" : \"🇬🇧 Original English Subtitles\"}\n

{subtitle}

\n ))}\n \n )}\n\n {translatedSubtitles.length > 0 && (\n \n \n

🇮🇳 Translated Hindi Subtitles

{subtitle}

\n ))}\n \n )}\n\n \n 🚨 Note: Subtitle translation is AI-powered and may not be 100% accurate.\n
\n Supports Japanese and English to Hindi translation\n
\n \n View Source Code\n \n

\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request) {\n return new Response(\n `\n \n \n Japanese to Hindi Subtitle Translator\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}",["D",1739699320334],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

autoSubtitleApp

Version 1