search

Technoculture / echoes

For collaboration between R&D teams and AI agents
https://www.echoes.team/
MIT License
8 stars 3 forks source link

initializing audio transcription #36

Closed PrinceBaghel258025 closed 1 year ago

PrinceBaghel258025 commented 1 year ago

Should close #15

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
echoes ✅ Ready (Inspect) Visit Preview ✅ 1 resolved Sep 6, 2023 11:19am
sutyum commented 1 year ago

Input bar rewrite

Desktop

Frame 6 Frame 8

Mobile

Frame 51 Frame 31 Frame 7

Note the UI uses shadcn components (except for the waveform). The UI design shows UI in light theme while Echoes only uses a dark theme. Using the same components as shown here from shadcn will automatically get you right style scheme

Implementing the waveform

A reference for wavesurfer integration to improve ui:

Animation

You should use a animation library (such as framer-motion) to implement the state transitions of input bar expanding and contacting

sutyum commented 1 year ago

Here is a modified version of their record example that should work fine.

// Record plugin

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
import RecordPlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/record.esm.js'

const wavesurfer = WaveSurfer.create({
  container: '#mic',
  waveColor: 'rgb(148, 163, 184)',
  progressColor: 'rgb(226, 232, 240)',

  barWidth: 12,
  barGap: 8,
  barRadius: 8,
})

// Initialize the Record plugin
const record = wavesurfer.registerPlugin(RecordPlugin.create())

// Buttons
{
  // Start recording
  const recButton = document.querySelector('#record')
  recButton.onclick = () => {
    if (record.isRecording()) {
      record.stopRecording()
      recButton.textContent = 'Record'
      return
    }

    recButton.disabled = true

    record.startRecording().then(() => {
      recButton.textContent = 'Stop'
      recButton.disabled = false
    })
  }
}

/*
<html>
  <h1 style="margin-top: 0">Press Record to start recording 🎙️</h1>

  <p>
    📖 <a href="https://wavesurfer-js.org/docs/classes/plugins_record.RecordPlugin">Record plugin docs</a>
  </p>

  <button id="record">Record</button>

  <div id="mic" style="border: 1px solid #ddd; border-radius: 4px; margin-top: 1rem"></div>

  <div id="recordings" style="margin: 1rem 0"></div>
</html>
*/
sutyum commented 1 year ago

When the input field is empty, pressing the send button should have no effect.