Como construir um aplicativo de transcrição de diálogo em tempo real (semelhante à função de transcrição de texto no zoom) e implantá-lo no Heroku

Construção de aplicativo

• Aplicativo baseado em html + javascript
• A API de terceiros usada é fornecida pelo Assembly AI
  

IA de montagem

• Para usar a função de transcrição em tempo real, primeiro você precisa registrar um pacote Assembly AI ,pro
• Eu o armazeno por padrão $5como minha taxa para jogar este aplicativo
  
• tokenO próximo passo é colocar isso dentro server.jsdeauthorization

estrutura de pastas

.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── css
│   ├── index.html
│   └── js
└── server.js

3 directories, 5 files

• Este código é baseado no código baseado na recomendação oficial do Assembly AI javascript, mas alguns ajustes detalhados foram feitos para implantação. Você pode usar diretamente meu código-fonte para modificá-lo
• Tente colocar todos os recursos estáticos publicna pasta

Construção de front-end

HTML

• O front-end é baseado no HTMLarquivo original. Vale ressaltar que adicionei um <div>"all_text" ao código original para facilitar a fala de cada pessoa e iniciar um novo parágrafo para o próximo discurso. Dessa forma, se houver várias pessoas se comunicando juntas, elas podem ser exibidas em ordem, enquanto o código-fonte coloca apenas todas as falas de uma pessoa em um parágrafo <p id="message">.

index.js

• No início, usamos CSSo seletor para localizar esses objetos, para que possamos operar domem diferentes objetos posteriormentedom
• No geral, clickvinculamos um evento a button, e quando isso clickacontecer, iniciaremos runessa função assíncrona
  
• runA lógica do código principal 26começa no início da linha else. Se você não implantar aqui Heroku, é equivalente a usar o seu próprio localhostcomo servidor e atribuir uma porta (no meu programa, eu uso 30001a porta) e atribuir um endpointpara especificar o endpoint para acessar o back-end para solicitar serviços. Precisamos falar sobre esse serviço em combinação com o código do back-end /token. tokenAqui você só precisa ter um entendimento geral. Para usar transcriptesta função do Assembly AI, precisamos tokenprovar nossa identidade ao Assembly AI. Portanto, recordquando o front-end clica no botão, é necessário que o back-end solicite isso do Assembly AI.token
• responseO resultado é estetoken
• Portanto, o front-end usa isso tokenpara estabelecer uma conexão diretamente com o servidor Assembly AI Websocket. É importante observar que isso é apenas um ponto, porque geralmente usamos httpa conexão, mas httpo problema da conexão é que ela solicita um conjunto de dados a cada vez, e a conexão será desconectada após cada solicitação. No entanto, realizar a transcrição é um processo contínuo, portanto, não podemos deixar a conexão ser desconectada, então usamos para estabelecer uma websocketconexão
• Se você precisar implantar mais tarde Heroku, o endpoint da solicitação será alterado para o endpoint do serviço tokenque você mesmo implantouHerokutoken
• Depois de Websocketobter os dados correspondentes transcript, eles podem ser exibidos no front-end passo a passo.

• Aqui resestão os dados retornados pela API Assembly AI. Cada dado terá alguns atributos (recomenda-se depurá-los você mesmo), que message_typepodem indicar se a frase atual é a frase que o locutor terminou de falar. Em caso afirmativo, exibirei o resultado do próximo reconhecimento em um novo parágrafo aqui.

Construção de back-end

server.js

requer atenção:

• Defina a pasta estática, isso é Herokumuito importante para , se não for especificado aqui, a página de front-end não será exibida após a implantação do Heroku
• authorization:O último exige que você se inscreva para um propacote Assembly AI para usar, e ele lhe dará um , e você pode se inscrever no plano de fundo do Assembly AI para transcrição de texto somente keydepois de obter issokeytoken
• Para especificação de porta, se for local, você pode gravar diretamente qualquer porta, mas no Herokuprocesso de implantação do , ele precisa alocar uma porta para você em tempo real, por isso está escrito process.env.PORT || 30001, o que significa que se 30001a porta estiver disponível quando o servidor for implantado, ela será usada e, se não estiver disponível, será atribuída automaticamente.
• server.jsEm essência, apenas uma coisa é feita, que é keysolicitar uma do background AI do Assembly tokene devolvê-la ao front-end

pacote.json

finalmente package.jsono arquivo

• Se Herokua implantação for realizada, o aplicativo Herokuserá habilitado por padrão após a implantação ser bem-sucedida npm start, mas não existe esse comando no código original fornecido pelo autor start, portanto, definimos aqui o comando startpara abrir server.jso aplicativo

Implantação do Heroku

• Observe que tente não usar VPN durante o uso Heroku, pois ele detectará seu problema de endereço, se não corresponder, informará um erro, claro que isso é um evento de probabilidade, então sugiro desligar a VPN

Crie a sua conta aqui

https://id.heroku.com/login

• Agora o login do Heroku adicionou muita verificação de segurança, como usar telefones celulares ou ipads para criar comandos de segurança, mas não se preocupe, apenas faça

Criar um aplicativo Heroku

• Ao usar esta etapa pela primeira vez, você também deve vincular um cartão bancário para facilitar a dedução posterior. Você pode definir isso de acordo com a situação

carregar armazém

• Digamos que eu crie um aplicativo chamadotranscrpit-demo2
• Siga esta etapa para operar em sua pasta local