私の提出の概要

目標は、入力値に余分な方法を提供することです.それは本当に障害者、キーボード上の入力に問題がある人のために役立つ可能性があります.任意の入力ポインタと音声を使用して入力することができます!クール!

提出カテゴリ

アクセシビリティ

Githubのコードへのリンク

パヴェリー / 反応深層例

デビッドHackathonプロジェクト、Deepgram AI音声認識の使用、あなたのアプリアクセシビリティを高める

AIの音声認識（深層）とブーストあなたの反応アプリのアクセシビリティ！

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

何ですか。

それは、反応を使用している深さとの統合の例です.

ディープグラム?

Deepgramオーディオからのトランスポート音声への外部サービスです!(AIを使って、クレイジーなもの!)
詳しくはこちらを参照ください.https://deepgram.com

目的

目的は、反応アプリのアクセシビリティを向上させるために音声転写を使用することです.我々は、入力値に余分な方法を提供する!

障害者のための入力を提供するヘルプ

フォーム充填をスピードアップする

共有Experience任意のデバイスを

現代ブラウザをサポートするデバイス

反応ネイティブ(モバイル、テレビ、dekstop)も!

なぜ？

プロジェクトは、Hackathlonに提出して、より多くを読みました

どのように動作している？

プロジェクトは、2つの部分DeepgramプロキシとDeepgram反応から造られます

ディープグラムプロキシ

オーディオファイルをアップロードするためにバックエンドが必要です.
View on GitHub

追加情報

私はフロントエンドのアプリとして反応を使用しています.
これは、反応フロントエンドのアプリが必要ではないことを覚えておくことが重要です.あなたがアプリケーションの他のタイプのプロキシを統合することができます.それはちょうど残りのAPIです!
プロセスはかなり簡単です.

表示ディープコンポーネント

マイクロホンに許可を求める

あなたの声を録音

プロキシへのオーディオの送信

ProxyはDeepgramに転写を依頼する

転写に関する代理応答,誤りなし,または転写についての反り(例えば,ユーザはより多くを繰り返す必要がある)

ユーザーは、転写を受け取り、入力に適用されます

技術面からのプロキシ

ノードです.JSエクスプレス.JPはAPIリクエストを処理し、Deepgramと通信します

// 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とセッターを渡す単純なハンドラです.
私は使用の2つの視覚化を準備しました.私はコンポーネントライブラリとしてANTDデザインを使用しています.
任意の反応コンポーネントにポップアップを作成するラッパーを使用します.

<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