|
|
|
|
|
Название проекта: |
Веб-приложение: распознавание речи в текст через Yandex SpeechKit
|
|
Кто разместил: |
Внешний проект с weblancer.net
|
|
Открыт: |
22-Jun-2025 18:41 GMT |
|
Описание: |
<p><b>Техническое задание: веб-приложение для распознавания речи в текст через Yandex SpeechKit</b></p><p> </p><p><b>? Описание задачи</b></p><p></p><p>Здравствуйте.</p><p> </p><p>Необходимо разработать простое веб-приложение, в котором пользователь может нажать на кнопку, записать голос с микрофона (в том числе с мобильного телефона), а затем получить распознанный текст. Распознавание должно происходить через облачный сервис <a href="https://cloud.yandex.com/ru/services/speechkit">Yandex SpeechKit</a>.</p><p> </p><p> </p><p><b>? Функциональные требования</b></p><p></p><ol><li><p>Фронтенд (React + Next.js):<br /> </p><ul><li><p>Одна страница.</p></li><li><p>Кнопка “Начать запись”, “Остановить запись”.</p></li><li><p>После записи — отправка аудио на бэкенд.</p></li><li><p>Отображение результата распознавания на экране.</p></li></ul></li><li><p></p></li><li><p>Бэкенд (Node.js + Express):<br /> </p><ul><li><p>Принимает аудиофайл от клиента.</p></li><li><p>Отправляет его в Yandex SpeechKit API.</p></li><li><p>Возвращает клиенту распознанный текст.</p></li><li><p>Использует переменные IAM_TOKEN и FOLDER_ID (через .env).</p></li></ul></li><li><p></p></li><li><p>Поддержка с мобильных устройств.<br /> </p><ul><li><p>Приложение должно работать с браузеров телефонов.</p></li><li><p>Запись должна работать с мобильного микрофона.</p></li></ul></li><li><p></p></li></ol><p> </p><p></p><p> </p><p><b>?? Технические детали</b></p><p> </p><p>Формат аудио: WAV или PCM, 16 или 48 kHz, mono</p><p> </p><p>Язык распознавания: ru-RU</p><p> </p><p>Режим: однократная запись (не потоковая)</p><p> </p><p></p><p> </p><p></p><p> </p><p></p><p> </p><p></p><p> </p><p><b>? Структура проекта</b></p><p> </p><p></p><p> </p><p>/</p><p> </p><p>??? frontend (Next.js)</p><p> </p><p>? ??? pages/index.js</p><p> </p><p>??? backend (Node.js)</p><p> </p><p> ??? index.js</p><p> </p><p> ??? .env</p><p> </p><p></p><p> </p><p></p><p> </p><p></p><p> </p><p></p><p> </p><p><b>? Фронтенд — </b></p><p> </p><p><b>pages/index.js</b></p><p> </p><p></p><p> </p><p>npm install react-media-recorder axios</p><p> </p><p>import { ReactMediaRecorder } from "react-media-recorder";</p><p> </p><p>import axios from "axios";</p><p> </p><p></p><p> </p><p>export default function Home() {</p><p> </p><p> const sendAudioToBackend = async (blob) => {</p><p> </p><p> const formData = new FormData();</p><p> </p><p> formData.append("audio", blob, "audio.wav");</p><p> </p><p></p><p> </p><p> const response = await axios.post("http://localhost:5000/recognize", formData, {</p><p> </p><p> headers: { "Content-Type": "multipart/form-data" },</p><p> </p><p> });</p><p> </p><p></p><p> </p><p> alert("Результат: " + response.data.result);</p><p> </p><p> };</p><p> </p><p></p><p> </p><p> return (</p><p> </p><p> <div style={{ textAlign: "center", marginTop: 100 }}></p><p> </p><p> <h2>? Распознавание речи</h2></p><p> </p><p> <ReactMediaRecorder</p><p> </p><p> audio</p><p> </p><p> render={({ startRecording, stopRecording, mediaBlobUrl }) => (</p><p> </p><p> <></p><p> </p><p> <button onClick={startRecording}>? Начать запись</button></p><p> </p><p> <button onClick={() => stopRecording()}>? Остановить</button></p><p> </p><p> {mediaBlobUrl && (</p><p> </p><p> <audio</p><p> </p><p> src={mediaBlobUrl}</p><p> </p><p> controls</p><p> </p><p> onEnded={() => {</p><p> </p><p> fetch(mediaBlobUrl)</p><p> </p><p> .then((res) => res.blob())</p><p> </p><p> .then(sendAudioToBackend);</p><p> </p><p> }}</p><p> </p><p> /></p><p> </p><p> )}</p><p> </p><p> </></p><p> </p><p> )}</p><p> </p><p> /></p><p> </p><p> </div></p><p> </p><p> );</p><p> </p><p>}</p><p> </p><p></p><p> </p><p></p><p> </p><p></p><p> </p><p></p><p> </p><p><b>? Бэкенд — </b></p><p> </p><p><b>index.js</b></p><p> </p><p></p><p> </p><p>npm init -y</p><p> </p><p>npm install express multer axios cors dotenv</p><p> </p><p>const express = require("express");</p><p> </p><p>const multer = require("multer");</p><p> </p><p>const cors = require("cors");</p><p> </p><p>const axios = require("axios");</p><p> </p><p>require("dotenv").config();</p><p> </p><p></p><p> </p><p>const app = express();</p><p> </p><p>const upload = multer();</p><p> </p><p>app.use(cors());</p><p> </p><p></p><p> </p><p>app.post("/recognize", upload.single("audio"), async (req, res) => {</p><p> </p><p> try {</p><p> </p><p> const response = await axios.post(</p><p> </p><p> "https://stt.api.cloud.yandex.net/speech/v1/stt:recognize",</p><p> </p><p> req.file.buffer,</p><p> </p><p> {</p><p> </p><p> headers: {</p><p> </p><p> Authorization: `Bearer ${process.env.IAM_TOKEN}`,</p><p> </p><p> "Content-Type": "application/octet-stream",</p><p> </p><p> },</p><p> </p><p> params: {</p><p> </p><p> folderId: process.env.FOLDER_ID,</p><p> </p><p> lang: "ru-RU",</p><p> </p><p> format: "lpcm",</p><p> </p><p> sampleRateHertz: 48000,</p><p> </p><p> },</p><p> </p><p> }</p><p> </p><p> );</p><p> </p><p></p><p> </p><p> res.json({ result: response.data.result });</p><p> </p><p> } catch (error) {</p><p> </p><p> console.error(error.response?.data || error.message);</p><p> </p><p> res.status(500).json({ error: "Ошибка распознавания" });</p><p> </p><p> }</p><p> </p><p>});</p><p> </p><p></p><p> </p><p>app.listen(5000, () => console.log("Бэкенд запущен на http://localhost:5000"));</p><p> </p><p></p><p> </p><p><b>? </b></p><p> </p><p><b>.env</b></p><p> </p><p></p><p> </p><p>IAM_TOKEN=ваш_IAM_токен</p><p> </p><p>FOLDER_ID=ваш_folder_id</p><p></p><p> </p><p><b>? Что от вас требуется:</b></p><ul><li><p>Сделать полностью рабочий фронт и бэк (с учётом CORS и .env)</p></li><li><p>Убедиться, что работает с телефонов</p></li><li><p>Сделать простый чистый UI с кнопками</p></li><li><p>Выдать исходный код + инструкцию запуска (README.md)</p></li></ul><p></p><p> </p><p><b>? Как будет использоваться:</b></p><p></p><p></p><p>Прототип для внутреннего использования и будущей мобильной версии (на Flutter).</p><p> </p><p></p><p> </p> |
|
Project ID:
|
4770950 |
|
Категория проекта: |
|
|
Бюджет проекта: |
|
|
|
|
|
|
|
|
|
|
|
