내 제출물 개요

목표는 값을 입력하는 추가 방법을 제공하는 것입니다. 장애가 있는 사람, 키보드 입력에 문제가 있는 사람에게 정말 도움이 될 수 있습니다. 포인터와 음성을 사용하여 모든 입력을 채울 수 있습니다! 시원한!

제출 카테고리:

접근성

GitHub의 코드 링크

파벨리 / react-deepgram-예제

DEV 해커톤 프로젝트, Deepgram AI 음성 인식 사용, 앱 접근성 향상

AI 음성인식(Deepgram)으로 리액트 앱 접근성을 높이세요!

What's that?

Deepgram?

Purpose

Why?

How it's working?

deepgram-proxy

deepgram-react

Run a project

Get your API key

Set your API key

Run

Using docker

Using local env

저게 뭐야?

react를 이용한 Deepgram과의 연동 예시입니다.

딥그램?

Deepgram은 오디오에서 음성을 전사하는 외부 서비스입니다! (AI 사용, 미친 짓!)
더 읽어보기: https://deepgram.com

목적

목적은 반응 앱 접근성을 개선하기 위해 음성 전사를 사용하는 것입니다. 값을 입력하는 추가 방법을 제공합니다!

장애가 있는 사람을 위한 정보 제공 지원

양식 작성 속도 향상

모든 장치에서 경험 공유

최신 브라우저를 지원하는 모든 장치

react-native(mobile, TV, dekstop)도!

왜요?

프로젝트가 DEV 해커슬론에 제출되었습니다. 자세히 보기

어떻게 작동합니까?

프로젝트는 deepgram-proxy와 deepgram-react의 두 부분으로 구성됩니다.

딥그램 프록시

오디오 파일을 업로드하고 통신하려면 백엔드가 필요합니다…

View on GitHub

추가 리소스/정보

react를 프론트엔드 앱으로 사용하고 있습니다.

react frontend 앱이 필요하지 않다는 것을 기억하는 것이 중요합니다. 다른 유형의 앱과 프록시를 통합할 수 있습니다. 그것은 단지 REST API입니다!

프로세스는 매우 간단합니다.

Deepgram 구성 요소 표시

마이크(브라우저)에 대한 권한 요청

음성 녹음

오디오를 프록시로 전송 중

프록시는 Deepgram에 기록 요청

전사, 오류 또는 전사 없음에 대한 경고가 포함된 프록시 응답(예: 사용자가 더 크게 반복해야 함)

사용자가 전사를 수신하고 입력에 적용

기술적인 측면에서 프록시.

API 요청을 처리하고 Deepgram과 통신하는 것은 node.js + express.js입니다(Deepgram SDK 사용).

// endpoint to upload and transcript
app.post("/audiotranscript", upload.single("file"), async (req, res) => {
    let filepath = req.file.path
    let language = req.body.language;
    let transcript = await deepgramTranscript(deepgramApiKey, filepath, language);
    res.send({ transcript: transcript });
});

기술적인 측면에서 앞섰다.

값에 대한 프록시 URL 및 설정자를 전달하는 것은 간단한 핸들러입니다.

두 가지 사용 시각화를 준비했습니다. 구성 요소 라이브러리로 antd 디자인을 사용하고 있습니다.

모든 React 구성 요소에 팝오버를 생성하는 래퍼 사용.

<DeepgramHandlerPopover
    setValue={setNotepadValue}
    proxyUploadUrl={proxyUploadUrl}
>
    <Input.TextArea
        rows={20}
        value={value}
        onChange={(ev) => {
            setValue(ev.target.value);
        }}
    />
</DeepgramHandlerPopover>

모달 사용(소형 장치 친화적)

<DeepgramHandlerModalButton
    setValue={setNotepadValue}
    proxyUploadUrl={proxyUploadUrl}
    buttonProps={{
        type: "primary",
    }}
/>

다른 아이디어가 있으면 처리기를 쉽게 감쌀 수 있습니다.

<MyCoolComponent>
    <DeepgramHandler
        setValue={setValue}
        proxyUploadUrl={proxyUploadUrl}
    />
</MyCoolComponent>

마지막 생각들

Deepgram이 만든 것에 정말 감사드립니다. 제 영어가 불분명해도 정말 잘 작동합니다. 기술 산업이 우리의 삶을 어떻게 개선하는지 놀랍습니다! <3