Log inSign up
yawnxyz avatar
Public
HTTP
Forked from yawnxyz/voice
Fork
3 Likes
yawnxyz-translator.web.val.run
Readme

Press to talk, and get a translation!

The app is set up so you can easily have a conversation between two people. The app will translate between the two selected languages, in each voice, as the speakers talk.

Add your OpenAI API Key, and make sure to open in a separate window for Mic to work.

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
import { Hono } from "npm:hono@3";
import { html } from "npm:hono@3/html";
import { cors } from 'npm:hono/cors';
import { OpenAI } from "npm:openai";
const app = new Hono();
const openai = new OpenAI(Deno.env.get("OPENAI_API_KEY_VOICE"));
class TranscriptionService {
async transcribeAudio(audioFile) {
try {
const transcription = await openai.audio.transcriptions.create({
file: audioFile,
model: "whisper-1",
response_format: "text",
});
return transcription;
} catch (error) {
console.error('OpenAI API error:', error);
throw error;
}
}
}
export const transcriptionService = new TranscriptionService();
app.use('*', cors({
origin: '*',
allowMethods: ['GET', 'POST'],
allowHeaders: ['Content-Type'],
}));
app.get("/", async (c) => {
const languages = [
"Afrikaans", "Arabic", "Armenian", "Azerbaijani", "Belarusian", "Bosnian", "Bulgarian", "Catalan", "Chinese", "Croatian", "Czech", "Danish", "Dutch", "English", "Estonian", "Finnish", "French", "Galician", "German", "Greek", "Hebrew", "Hindi", "Hungari
];
const voices = [
"alloy",
"echo",
"fable",
"onyx",
"nova",
"shimmer"
];
const resHtml = html`
<!DOCTYPE html>
<html>
<head>
<title>Translator</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@media (max-width: 640px) {
.container {
max-width: 100%;
padding: 1rem;
}
button {
font-size: 1.5rem;
padding: 1rem 2rem;
}
select {
font-size: 1.2rem;
padding: 0.8rem;
}
audio {
width: 100%;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container mx-auto py-8 px-8" x-data="recordingData">
<h1 class="text-4xl font-bold mb-4">Translator</h1>
<div class="mb-4">
<h2 class="font-bold mb-2">Languages</h2>
<div class="grid grid-cols-2 gap-4" x-data="{
languages: [
'Afrikaans', 'Arabic', 'Armenian', 'Azerbaijani', 'Belarusian', 'Bosnian', 'Bulgarian', 'Catalan', 'Chinese', 'Croatian', 'Czech', 'Danish', 'Dutch', 'English', 'Estonian', 'Finnish', 'French', 'Galician', 'German', 'Greek', 'Hebrew', 'Hind
]
}">
<div>
<select id="language1" name="language1" class="border border-gray-300 rounded px-4 py-2 mb-4 w-full">
<template x-for="lang in languages">
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Comments
Nobody has commented on this val yet: be the first!
v151
May 10, 2024