From 230d7b3bf6d51bf56903891b79e468c9dd6d2e3a Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Wed, 23 Sep 2026 13:58:43 +0330
Subject: [PATCH] AI-powered speech-to-text transformation

---
 apps/api/src/ai/ai-stt.service.ts             |  89 ----
 apps/api/src/ai/ai.controller.ts              |  28 +-
 apps/api/src/ai/ai.module.ts                  |   5 +-
 apps/web/src/components/VoiceToTextButton.vue | 418 +++++-------------
 4 files changed, 120 insertions(+), 420 deletions(-)
 delete mode 100644 apps/api/src/ai/ai-stt.service.ts

diff --git a/apps/api/src/ai/ai-stt.service.ts b/apps/api/src/ai/ai-stt.service.ts
deleted file mode 100644
index 03c3792..0000000
--- a/apps/api/src/ai/ai-stt.service.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import {
-  BadRequestException,
-  Injectable,
-  ServiceUnavailableException,
-} from '@nestjs/common';
-import { ConfigService } from '@nestjs/config';
-
-const MAX_AUDIO_BYTES = 8 * 1024 * 1024;
-
-@Injectable()
-export class AiSttService {
-  constructor(private readonly config: ConfigService) {}
-
-  isEnabled(): boolean {
-    return (
-      this.config.get<string>('STT_ENABLED') === 'true' &&
-      Boolean(this.sttUrl())
-    );
-  }
-
-  async transcribe(file: Express.Multer.File | undefined) {
-    if (!this.isEnabled()) {
-      throw new ServiceUnavailableException('تبدیل صوت به متن فعال نیست');
-    }
-    if (!file?.buffer?.length) {
-      throw new BadRequestException('فایل صوتی ارسال نشده است');
-    }
-    if (file.size > MAX_AUDIO_BYTES) {
-      throw new BadRequestException('حجم فایل صوتی بیش از حد مجاز است');
-    }
-
-    const form = new FormData();
-    form.append(
-      'audio',
-      new Blob([new Uint8Array(file.buffer)], {
-        type: file.mimetype || 'audio/wav',
-      }),
-      file.originalname || 'audio.wav',
-    );
-
-    const timeoutMs = Number(this.config.get<string>('STT_TIMEOUT_MS') || 180000);
-    const headers: Record<string, string> = {};
-    const token = this.config.get<string>('STT_INTERNAL_TOKEN')?.trim();
-    if (token) headers['X-STT-Token'] = token;
-
-    let res: Response;
-    try {
-      res = await fetch(`${this.sttUrl()}/transcribe`, {
-        method: 'POST',
-        headers,
-        body: form,
-        signal: AbortSignal.timeout(timeoutMs),
-      });
-    } catch (e) {
-      const name = e instanceof Error ? e.name : '';
-      if (name === 'TimeoutError' || name === 'AbortError') {
-        throw new ServiceUnavailableException(
-          'زمان تبدیل صوت تمام شد. اگر تازه مدل عوض شده، چند دقیقه صبر کنید تا دانلود شود و دوباره امتحان کنید.',
-        );
-      }
-      throw new ServiceUnavailableException(
-        'سرویس تبدیل صوت خاموش است. مدل medium معمولاً حافظهٔ سرور را پر می‌کند و پروسه را می‌کشد. در apps/stt/.env مقدار STT_MODEL=small بگذارید و pm2 restart mento-stt بزنید.',
-      );
-    }
-
-    const payload = (await res.json().catch(() => ({}))) as {
-      text?: string;
-      detail?: string | Array<{ msg?: string }>;
-    };
-
-    if (!res.ok) {
-      const detail = Array.isArray(payload.detail)
-        ? payload.detail.map((item) => item.msg).filter(Boolean).join('، ')
-        : payload.detail;
-      const raw = String(detail || '').trim();
-      let message = raw || 'تبدیل صوت به متن ناموفق بود';
-      if (raw.length > 220) {
-        message = 'تبدیل صوت به متن ناموفق بود. سرویس STT محلی را بررسی کنید.';
-      }
-      throw new ServiceUnavailableException(message);
-    }
-
-    return { text: (payload.text ?? '').trim() };
-  }
-
-  private sttUrl(): string {
-    return (this.config.get<string>('STT_URL') ?? '').trim().replace(/\/$/, '');
-  }
-}
diff --git a/apps/api/src/ai/ai.controller.ts b/apps/api/src/ai/ai.controller.ts
index cb912a4..5f2b81b 100644
--- a/apps/api/src/ai/ai.controller.ts
+++ b/apps/api/src/ai/ai.controller.ts
@@ -1,22 +1,10 @@
-import {
-  Body,
-  Controller,
-  Get,
-  Param,
-  Post,
-  UploadedFile,
-  UseGuards,
-  UseInterceptors,
-} from '@nestjs/common';
-import { FileInterceptor } from '@nestjs/platform-express';
-import { memoryStorage } from 'multer';
+import { Body, Controller, Get, Param, Post, UseGuards } from '@nestjs/common';
 import { JwtAuthGuard } from '../auth/jwt-auth.guard';
 import { CurrentUser } from '../auth/current-user.decorator';
 import type { Actor } from '../common/record-scope';
 import { AiAskService } from './ai-ask.service';
 import { AskMentoDto } from './dto';
 import { AiService } from './ai.service';
-import { AiSttService } from './ai-stt.service';
 
 @Controller('ai')
 @UseGuards(JwtAuthGuard)
@@ -24,23 +12,11 @@ export class AiController {
   constructor(
     private readonly ai: AiService,
     private readonly ask: AiAskService,
-    private readonly stt: AiSttService,
   ) {}
 
   @Get('status')
   status() {
-    return { enabled: this.ai.isEnabled(), stt: this.stt.isEnabled() };
-  }
-
-  @Post('transcribe')
-  @UseInterceptors(
-    FileInterceptor('audio', {
-      storage: memoryStorage(),
-      limits: { fileSize: 8 * 1024 * 1024 },
-    }),
-  )
-  transcribe(@UploadedFile() file: Express.Multer.File) {
-    return this.stt.transcribe(file);
+    return { enabled: this.ai.isEnabled() };
   }
 
   @Post('ask')
diff --git a/apps/api/src/ai/ai.module.ts b/apps/api/src/ai/ai.module.ts
index c05d6af..e4980b4 100644
--- a/apps/api/src/ai/ai.module.ts
+++ b/apps/api/src/ai/ai.module.ts
@@ -2,12 +2,11 @@ import { Global, Module } from '@nestjs/common';
 import { AiAskService } from './ai-ask.service';
 import { AiController } from './ai.controller';
 import { AiService } from './ai.service';
-import { AiSttService } from './ai-stt.service';
 
 @Global()
 @Module({
   controllers: [AiController],
-  providers: [AiService, AiAskService, AiSttService],
-  exports: [AiService, AiSttService],
+  providers: [AiService, AiAskService],
+  exports: [AiService],
 })
 export class AiModule {}
diff --git a/apps/web/src/components/VoiceToTextButton.vue b/apps/web/src/components/VoiceToTextButton.vue
index 72f9611..54b9f7e 100644
--- a/apps/web/src/components/VoiceToTextButton.vue
+++ b/apps/web/src/components/VoiceToTextButton.vue
@@ -1,10 +1,30 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref } from 'vue';
-import axios from 'axios';
-import { api } from '@/lib/api';
 import { toFaDigits } from '@/lib/jalali';
 import UiIcon from '@/components/UiIcon.vue';
 
+type SpeechResult = {
+  isFinal: boolean;
+  0: { transcript: string };
+};
+
+type SpeechResultEvent = {
+  resultIndex: number;
+  results: ArrayLike<SpeechResult>;
+};
+
+type SpeechRec = {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start: () => void;
+  stop: () => void;
+  abort: () => void;
+  onresult: ((ev: SpeechResultEvent) => void) | null;
+  onerror: ((ev: { error: string }) => void) | null;
+  onend: (() => void) | null;
+};
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean;
@@ -21,38 +41,35 @@ const emit = defineEmits<{
   error: [message: string];
 }>();
 
-const BAR_COUNT = 16;
-const recording = ref(false);
-const transcribing = ref(false);
-const error = ref('');
-const seconds = ref(0);
-const bars = ref<number[]>(Array.from({ length: BAR_COUNT }, () => 0.12));
-
-let stream: MediaStream | null = null;
-let ctx: AudioContext | null = null;
-let source: MediaStreamAudioSourceNode | null = null;
-let processor: ScriptProcessorNode | null = null;
-let analyser: AnalyserNode | null = null;
-let mute: GainNode | null = null;
-let chunks: Float32Array[] = [];
-let sampleRate = 16000;
-let timer: number | null = null;
-let limitTimer: number | null = null;
-let raf = 0;
-
+const UNSUPPORTED = 'تبدیل صوت به متن در این مرورگر پشتیبانی نمی‌شود. از Chrome استفاده کنید.';
 const MAX_SECONDS = 90;
 
-const busy = computed(() => recording.value || transcribing.value);
+const recording = ref(false);
+const error = ref('');
+const seconds = ref(0);
+
+let recognition: SpeechRec | null = null;
+let timer: number | null = null;
+let limitTimer: number | null = null;
+let stopping = false;
+let failed = false;
+
 const timerLabel = computed(() => {
   const m = String(Math.floor(seconds.value / 60)).padStart(2, '0');
   const s = String(seconds.value % 60).padStart(2, '0');
   return toFaDigits(`${m}:${s}`);
 });
-const ariaLabel = computed(() => {
-  if (transcribing.value) return 'در حال تبدیل صوت به متن';
-  if (recording.value) return 'توقف ضبط و تبدیل به متن';
-  return 'تبدیل صوت به متن';
-});
+const ariaLabel = computed(() =>
+  recording.value ? 'توقف تبدیل صوت به متن' : 'تبدیل صوت به متن',
+);
+
+function speechCtor(): (new () => SpeechRec) | null {
+  const w = window as Window & {
+    SpeechRecognition?: new () => SpeechRec;
+    webkitSpeechRecognition?: new () => SpeechRec;
+  };
+  return w.SpeechRecognition || w.webkitSpeechRecognition || null;
+}
 
 function setError(message: string) {
   error.value = message;
@@ -62,12 +79,7 @@ function setError(message: string) {
 function setRecording(active: boolean) {
   recording.value = active;
   emit('recording', active);
-  emit('busy', busy.value);
-}
-
-function setTranscribing(active: boolean) {
-  transcribing.value = active;
-  emit('busy', recording.value || active);
+  emit('busy', active);
 }
 
 function stopTimer() {
@@ -79,250 +91,115 @@ function stopTimer() {
     window.clearTimeout(limitTimer);
     limitTimer = null;
   }
-  if (raf) {
-    window.cancelAnimationFrame(raf);
-    raf = 0;
-  }
 }
 
-function resetBars() {
-  bars.value = Array.from({ length: BAR_COUNT }, () => 0.12);
-}
-
-function paintMeter() {
-  if (!analyser || !recording.value) return;
-  const freq = new Uint8Array(analyser.frequencyBinCount);
-  analyser.getByteFrequencyData(freq);
-  const next = bars.value.slice();
-  for (let i = 0; i < BAR_COUNT; i += 1) {
-    const idx = Math.min(freq.length - 1, Math.floor(2 + i * (freq.length * 0.42) / BAR_COUNT));
-    const raw = (freq[idx] ?? 0) / 255;
-    next[i] = next[i] * 0.45 + Math.max(0.08, raw) * 0.55;
-  }
-  bars.value = next;
-  raf = window.requestAnimationFrame(paintMeter);
-}
-
-function teardownMic() {
+function stop() {
+  stopping = true;
   stopTimer();
   try {
-    processor?.disconnect();
-    analyser?.disconnect();
-    source?.disconnect();
-    mute?.disconnect();
+    recognition?.stop();
   } catch {
-    /* ignore */
+    /* already stopped */
   }
-  processor = null;
-  analyser = null;
-  source = null;
-  mute = null;
-  stream?.getTracks().forEach((track) => track.stop());
-  stream = null;
-  if (ctx) {
-    void ctx.close().catch(() => undefined);
-    ctx = null;
-  }
-  resetBars();
-}
-
-function mergeChunks(parts: Float32Array[]) {
-  const length = parts.reduce((sum, part) => sum + part.length, 0);
-  const out = new Float32Array(length);
-  let offset = 0;
-  for (const part of parts) {
-    out.set(part, offset);
-    offset += part.length;
-  }
-  return out;
-}
-
-/** Downsample to 16 kHz so STT does not depend on server ffmpeg. */
-function resampleTo16k(samples: Float32Array, srcRate: number) {
-  const dstRate = 16000;
-  if (!srcRate || srcRate === dstRate) return { samples, rate: srcRate || dstRate };
-  const ratio = srcRate / dstRate;
-  const newLen = Math.max(1, Math.floor(samples.length / ratio));
-  const out = new Float32Array(newLen);
-  for (let i = 0; i < newLen; i += 1) {
-    const srcIndex = i * ratio;
-    const i0 = Math.floor(srcIndex);
-    const i1 = Math.min(samples.length - 1, i0 + 1);
-    const t = srcIndex - i0;
-    const a = samples[i0] ?? 0;
-    const b = samples[i1] ?? a;
-    out[i] = a + (b - a) * t;
-  }
-  return { samples: out, rate: dstRate };
-}
-
-function encodeWav(samples: Float32Array, rate: number) {
-  const bytes = samples.length * 2;
-  const buffer = new ArrayBuffer(44 + bytes);
-  const view = new DataView(buffer);
-  const write = (offset: number, text: string) => {
-    for (let i = 0; i < text.length; i += 1) view.setUint8(offset + i, text.charCodeAt(i));
-  };
-  write(0, 'RIFF');
-  view.setUint32(4, 36 + bytes, true);
-  write(8, 'WAVE');
-  write(12, 'fmt ');
-  view.setUint32(16, 16, true);
-  view.setUint16(20, 1, true);
-  view.setUint16(22, 1, true);
-  view.setUint32(24, rate, true);
-  view.setUint32(28, rate * 2, true);
-  view.setUint16(32, 2, true);
-  view.setUint16(34, 16, true);
-  write(36, 'data');
-  view.setUint32(40, bytes, true);
-  let offset = 44;
-  for (let i = 0; i < samples.length; i += 1) {
-    const sample = Math.max(-1, Math.min(1, samples[i] ?? 0));
-    view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7fff, true);
-    offset += 2;
-  }
-  return new Blob([buffer], { type: 'audio/wav' });
-}
-
-async function upload(blob: Blob) {
-  const form = new FormData();
-  form.append('audio', blob, 'dictation.wav');
-  const { data } = await api.post<{ text: string }>('/ai/transcribe', form);
-  return (data.text ?? '').trim();
-}
-
-async function finish(keep: boolean) {
-  const parts = chunks;
-  chunks = [];
-  const rate = sampleRate;
-  teardownMic();
+  recognition = null;
   setRecording(false);
-  if (!keep) return;
-
-  const samples = mergeChunks(parts);
-  if (samples.length < rate * 0.35) {
-    setError('صدای کافی ضبط نشد. کمی بیشتر صحبت کنید.');
-    return;
-  }
-
-  setTranscribing(true);
-  try {
-    const prepared = resampleTo16k(samples, rate);
-    const text = await upload(encodeWav(prepared.samples, prepared.rate));
-    if (!text) {
-      setError('متنی از صدا تشخیص داده نشد.');
-      return;
-    }
-    emit('transcript', text);
-  } catch (err) {
-    if (axios.isAxiosError(err)) {
-      const msg = (err.response?.data as { message?: string | string[] })?.message;
-      setError(Array.isArray(msg) ? msg.join('، ') : (msg ?? 'تبدیل صوت به متن ناموفق بود'));
-    } else {
-      setError('تبدیل صوت به متن ناموفق بود');
-    }
-  } finally {
-    setTranscribing(false);
-  }
 }
 
-async function start() {
+function start() {
   setError('');
-  if (!navigator.mediaDevices?.getUserMedia) {
-    setError('این مرورگر به میکروفون دسترسی نمی‌دهد.');
+  const Ctor = speechCtor();
+  if (!Ctor) {
+    setError(UNSUPPORTED);
     return;
   }
-  try {
-    stream = await navigator.mediaDevices.getUserMedia({
-      audio: { echoCancellation: true, noiseSuppression: true, channelCount: 1 },
-    });
-    const Ctor = window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
-    if (!Ctor) {
-      setError('ضبط صدا در این مرورگر پشتیبانی نمی‌شود.');
-      stream.getTracks().forEach((track) => track.stop());
-      stream = null;
+
+  const rec = new Ctor();
+  rec.lang = 'fa-IR';
+  rec.continuous = true;
+  rec.interimResults = false;
+  rec.onresult = (event) => {
+    let text = '';
+    for (let i = event.resultIndex; i < event.results.length; i += 1) {
+      const row = event.results[i];
+      if (row?.isFinal) text += row[0]?.transcript ?? '';
+    }
+    const next = text.replace(/\s+/g, ' ').trim();
+    if (next) emit('transcript', next);
+  };
+  rec.onerror = (event) => {
+    if (event.error === 'aborted' || event.error === 'no-speech') return;
+    failed = true;
+    if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
+      setError('دسترسی به میکروفون داده نشد.');
       return;
     }
-    try {
-      ctx = new Ctor({ sampleRate: 16000 });
-    } catch {
-      ctx = new Ctor();
+    if (event.error === 'network') {
+      setError('اتصال به تشخیص گفتار Chrome برقرار نشد.');
+      return;
     }
-    await ctx.resume();
-    sampleRate = ctx.sampleRate || 16000;
-    source = ctx.createMediaStreamSource(stream);
-    analyser = ctx.createAnalyser();
-    analyser.fftSize = 128;
-    analyser.smoothingTimeConstant = 0.62;
-    processor = ctx.createScriptProcessor(4096, 1, 1);
-    mute = ctx.createGain();
-    mute.gain.value = 0;
-    chunks = [];
-    processor.onaudioprocess = (event) => {
-      if (!recording.value) return;
-      chunks.push(new Float32Array(event.inputBuffer.getChannelData(0)));
-    };
-    source.connect(analyser);
-    source.connect(processor);
-    processor.connect(mute);
-    mute.connect(ctx.destination);
-    seconds.value = 0;
-    resetBars();
-    timer = window.setInterval(() => {
-      seconds.value += 1;
-    }, 1000);
-    limitTimer = window.setTimeout(() => {
-      void finish(true);
-    }, MAX_SECONDS * 1000);
-    setRecording(true);
-    paintMeter();
+    setError('تبدیل صوت به متن ناموفق بود.');
+  };
+  rec.onend = () => {
+    if (!stopping && !failed && recording.value) {
+      try {
+        rec.start();
+        return;
+      } catch {
+        /* fall through */
+      }
+    }
+    stopTimer();
+    recognition = null;
+    setRecording(false);
+  };
+
+  recognition = rec;
+  stopping = false;
+  failed = false;
+  seconds.value = 0;
+  try {
+    rec.start();
   } catch {
-    teardownMic();
-    setError('دسترسی به میکروفون داده نشد.');
+    setError(UNSUPPORTED);
+    recognition = null;
+    return;
   }
+  setRecording(true);
+  timer = window.setInterval(() => {
+    seconds.value += 1;
+  }, 1000);
+  limitTimer = window.setTimeout(() => stop(), MAX_SECONDS * 1000);
 }
 
 function toggle() {
-  if (props.disabled || transcribing.value) return;
+  if (props.disabled) return;
   if (recording.value) {
-    void finish(true);
+    stop();
     return;
   }
-  void start();
-}
-
-function barHeight(value: number) {
-  return `${6 + value * 22}px`;
+  start();
 }
 
 onBeforeUnmount(() => {
-  void finish(false);
+  stop();
 });
 </script>
 
 <template>
-  <div class="vtt-wrap" :class="[variant, { live: recording, wait: transcribing }]">
+  <div class="vtt-wrap" :class="[variant, { live: recording }]">
     <button
       class="vtt"
       type="button"
-      :class="{ on: recording, busy: transcribing }"
-      :disabled="disabled || transcribing"
+      :class="{ on: recording }"
+      :disabled="disabled"
       :aria-label="ariaLabel"
       :title="ariaLabel"
       @click="toggle"
     >
       <span class="glyph" aria-hidden="true">
-        <span v-if="transcribing" class="spinner" />
-        <UiIcon v-else :name="recording ? 'stop' : 'mic'" :size="variant === 'toolbar' ? 18 : 16" />
+        <UiIcon :name="recording ? 'stop' : 'mic'" :size="variant === 'toolbar' ? 18 : 16" />
       </span>
-
-      <span v-if="recording" class="meter" aria-hidden="true">
-        <i v-for="(level, index) in bars" :key="index" :style="{ height: barHeight(level) }" />
-      </span>
-
       <span v-if="recording" class="timer">{{ timerLabel }}</span>
-      <span v-else-if="transcribing" class="status">در حال تبدیل صوت به متن</span>
     </button>
     <p v-if="error && !hideError" class="err">{{ error }}</p>
   </div>
@@ -360,20 +237,11 @@ onBeforeUnmount(() => {
   border-color: #5eead4;
   background: #042f2e;
   color: #ecfdf5;
-  min-height: var(--control-h);
   padding-inline: 0.7rem 0.85rem;
   box-shadow: 0 10px 24px rgba(15, 118, 110, 0.22);
 }
 
-.vtt.busy {
-  min-height: var(--control-h);
-  border-color: #99f6e4;
-  background: #ecfdf5;
-  color: #0f766e;
-  cursor: wait;
-}
-
-.vtt:disabled:not(.busy) {
+.vtt:disabled {
   opacity: 0.45;
   cursor: not-allowed;
 }
@@ -386,41 +254,11 @@ onBeforeUnmount(() => {
   flex-shrink: 0;
 }
 
-.meter {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 28px;
-  min-width: 72px;
-}
-
-.meter i {
-  display: block;
-  width: 3px;
-  border-radius: var(--radius);
-  background: #5eead4;
-  box-shadow: 0 0 8px rgba(94, 234, 212, 0.45);
-  transition: height 70ms linear;
-}
-
-.status {
-  white-space: nowrap;
-}
-
 .timer {
   font-variant-numeric: tabular-nums;
   min-width: 2.4rem;
 }
 
-.spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid #99f6e4;
-  border-top-color: #0f766e;
-  border-radius: 50%;
-  animation: spin 0.7s linear infinite;
-}
-
 .toolbar .vtt {
   width: 38px;
   height: 38px;
@@ -432,42 +270,18 @@ onBeforeUnmount(() => {
   justify-content: center;
 }
 
-.toolbar.live .vtt,
-.toolbar.wait .vtt {
+.toolbar.live .vtt {
   width: auto;
-  height: auto;
   min-height: var(--control-h);
   height: var(--control-h);
   padding: 0 0.7rem;
   border-radius: var(--radius);
-}
-
-.toolbar .vtt.on {
   background: #042f2e;
 }
 
-.toolbar .vtt.busy {
-  background: #ecfdf5;
-}
-
 .err {
   margin: 0;
   color: #b91c1c;
   font-size: 0.78rem;
 }
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (max-width: 640px) {
-  .status {
-    max-width: 11.5rem;
-    white-space: normal;
-    text-align: start;
-    line-height: 1.4;
-  }
-}
 </style>