Skip to content

Commit

Permalink
updated the UI to mostly match their preliminary UI vision
Browse files Browse the repository at this point in the history
  • Loading branch information
@irvins
irvins committed Sep 29, 2024
1 parent 4e05e69 commit 749cbbd
Show file tree
Hide file tree
Showing 12 changed files with 651 additions and 188 deletions.
44 changes: 43 additions & 1 deletion MVP/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion MVP/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-mic": "^12.4.6"
"react-mic": "^12.4.6",
"react-router-dom": "^6.26.2"
},
"devDependencies": {
"@eslint/js": "^9.8.0",
Expand Down
156 changes: 17 additions & 139 deletions MVP/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,146 +1,24 @@
import { useState, useRef } from 'react';
import './App.css';
import VoiceRecorder from './VoiceRecorder';
import './assets/mvp.css';
import { FaPaperclip } from 'react-icons/fa';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Report from './components/Report';
import Header from './components/Header';
import Footer from './components/Footer';
import { StudentsProvider } from './contexts/Students';

function App() {
const [isRecording, setIsRecording] = useState(false);
const [audioUrl, setAudioUrl] = useState(null);
const [transcription, setTranscription] = useState('');
const [aiResponse, setAiResponse] = useState('');
const [isUploading, setIsUploading] = useState(false); // Track uploading state

const fileInputRef = useRef(null);

const handleStopRecording = async (blob) => {
const formData = new FormData();
formData.append('file', blob.blob, 'recording.mp3');

setIsUploading(true); // Set uploading state to true
callAjax(formData, (response) => {
setIsUploading(false); // Reset uploading state
if (response && response.transcription) {
setTranscription(response.transcription);
setAudioUrl(URL.createObjectURL(blob.blob));
} else {
console.error("Failed to get a transcription from the server.");
}
});
};

const handleFileChange = async (event) => {
const file = event.target.files[0];
if (file) {
console.log("Selected file: ", file);

const formData = new FormData();
formData.append('file', file, file.name); // Ensure filename is set

setIsUploading(true); // Set uploading state to true

callAjax(formData, (response) => {
setIsUploading(false); // Reset uploading state
if (response && response.transcription) {
setTranscription(response.transcription);
setAudioUrl(URL.createObjectURL(file)); // URL for the uploaded file
} else {
console.error("Failed to get a transcription from the server.");
}
});
}
};


const callAjax = (formData, callback) => {
window.clicnical_coach_jsmo_module.transcribeAudio(formData, (res) => {
if (res && res.transcription) {
if (callback) callback(res);
} else {
console.log("Unexpected response format:", res);
}
}, (err) => {
console.log("transcribeAudio error:", err);
if (callback) callback();
});
};

const handleSubmitToAI = () => {
const chatmlPayload = [
{ role: "system", content: "You are a helpful assistant." },
{ role: "user", content: transcription }
];

callAI(chatmlPayload, (aiContent) => {
if (aiContent) {
setAiResponse(aiContent);
} else {
console.error("Failed to get a response from the AI.");
}
});
};

const callAI = (chatmlPayload, callback) => {
window.clicnical_coach_jsmo_module.callAI(chatmlPayload, (res) => {
if (res) {
if (callback) callback(res);
} else {
console.log("Unexpected AI response format:", res);
}
}, (err) => {
console.log("callAI error:", err);
if (callback) callback();
});
};

return (
<div id="clinicalcoachmvp_container">
<h1>Clinical Coach - MVP</h1>
<div className="card">
<div className="controls">
<button onClick={() => fileInputRef.current.click()} className="attachment-button" disabled={isUploading}>
<FaPaperclip />
</button>
<VoiceRecorder
setIsRecording={setIsRecording}
handleStopRecording={handleStopRecording}
disabled={isUploading}
/>
<input
type="file"
ref={fileInputRef}
style={{ display: 'none' }}
accept="audio/*"
onChange={handleFileChange}
/>
<StudentsProvider>
<Router>
<div id="clinicalcoachmvp_container">
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/report" element={<Report />} />
</Routes>
<Footer />
</div>
{isUploading && (
<p style={{ marginTop: '20px', color: 'grey' }}>Uploading...</p>
)}
{audioUrl && (
<div style={{ marginTop: '20px' }}>
<audio controls src={audioUrl} style={{ width: '100%', maxWidth: '400px' }} />
</div>
)}
{transcription && (
<div style={{ marginTop: '20px' }}>
<blockquote style={{ fontStyle: 'italic' }}>
"{transcription}"
</blockquote>
<button onClick={handleSubmitToAI} style={{ marginTop: '10px' }}>
Submit to AI
</button>
</div>
)}
{aiResponse && (
<div style={{ marginTop: '20px' }}>
<blockquote style={{ fontStyle: 'italic' }}>
"{aiResponse}"
</blockquote>
</div>
)}
</div>
</div>
</Router>
</StudentsProvider>
);
}

Expand Down
Loading

0 comments on commit 749cbbd

Please sign in to comment.