Hugging Face's logo

MoYoYoTech
/
Translator

ONNX
GGUF
conversational
Model card Files
xet
Community
Translator
File size: 4,471 Bytes 
90a29dd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138d976
90a29dd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>试试翻译</title>
  <style>
    body {
      background-color: #f9f9fc;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
      margin: 0;
      padding: 2rem;
    }
    .translation-box {
      background: #f2f2f8;
      border-radius: 12px;
      padding: 1.5rem;
      max-width: 800px;
      margin: 0 auto;
      min-height: 200px;
    }
    .entry {
      margin-bottom: 1.5rem;
    }
    .timestamp {
      font-size: 0.75rem;
      color: #999;
    }
    .original {
      font-size: 1rem;
      color: #333;
    }
    .translation {
      font-size: 1rem;
      font-weight: bold;
      color: #000;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2rem;
    }
    .lang-select {
      background: white;
      border-radius: 9999px;
      padding: 0.4rem 1rem;
      border: none;
      font-size: 1rem;
      box-shadow: 0 0 0 1px #ddd;
    }
    .record-button {
      background-color: #1e40af;
      color: white;
      border: none;
      padding: 0.6rem 1.2rem;
      border-radius: 9999px;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="translation-box" id="translationBox">
    <!-- 实时内容将插入这里 -->
  </div>

  <div class="footer">
    <select class="lang-select">
      <option>中文 » 英语</option>
    </select>
    <button class="record-button" onclick="startRecording()">🎤 录音</button>
  </div>

  <script>
    let ws;
    let mediaRecorder;

    function formatTimestamp(ms) {
      const sec = ms / 1000;
      const min = Math.floor(sec / 60);
      const s = (sec % 60).toFixed(1);
      return `${String(min).padStart(2, '0')}:${s.padStart(4, '0')}`;
    }

    let lastSegId = null;  // 用于存储上一个 seg_id

function addTranslation(result) {
  const box = document.getElementById('translationBox');
  
  // 创建一个新的 div 来显示翻译
  const entry = document.createElement('div');
  entry.className = 'entry';
  
  console.log(result);

  const start = formatTimestamp(result.bg);
  const end = formatTimestamp(result.ed);
  
  // 判断是否是新的一行
  if (result.seg_id === lastSegId) {
    // 如果 seg_id 相同，更新该行内容
    const existingEntry = box.querySelector(`.entry[data-seg-id="${result.seg_id}"]`);
    if (existingEntry) {
      const translationDiv = existingEntry.querySelector('.translation');
      translationDiv.innerHTML = result.tranContent;
    }
  } else {
    // 如果 seg_id 不同，表示是新的行，添加新行
    entry.setAttribute('data-seg-id', result.seg_id);  // 设置 seg_id
    entry.innerHTML = `
      <div class="original">${result.context}</div>
      <div class="translation">${result.tranContent}</div>
    `;
    box.appendChild(entry);
  }

  // 更新 lastSegId 以便下一次判断
  lastSegId = result.seg_id;
}


    
    async function startRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const audioContext = new AudioContext({ sampleRate: 16000 });
      const source = audioContext.createMediaStreamSource(stream);
      const processor = audioContext.createScriptProcessor(4096, 1, 1);

      const wsUrl = "ws://localhost:9191/ws?from=zh&to=en";
      ws = new WebSocket(wsUrl);

      ws.binaryType = "arraybuffer";

      ws.onopen = () => {
        console.log("WebSocket opened");
        source.connect(processor);
        processor.connect(audioContext.destination);

        processor.onaudioprocess = (e) => {
          const input = e.inputBuffer.getChannelData(0);
          const buffer = new Int16Array(input.length);
          for (let i = 0; i < input.length; i++) {
            buffer[i] = Math.max(-1, Math.min(1, input[i])) * 0x7FFF;
          }
          ws.send(buffer);
        };
      };

      ws.onmessage = (event) => {
        try {
          const msg = JSON.parse(event.data);
          if (msg.result) {
            addTranslation(msg.result);
          }
        } catch (e) {
          console.error("Parse error:", e);
        }
      };

      ws.onerror = (e) => console.error("WebSocket error:", e);
      ws.onclose = () => {
        console.log("WebSocket closed");
        processor.disconnect();
        source.disconnect();
      };
    }
  </script>
</body>
</html>