更改

client/web/package.json

@@ -15,13 +15,15 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "firebase": "^10.0.0",
     "hark": "^1.2.3",
     "is-ip": "^5.0.0",
     "lz": "^0.1.1",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-icons": "^4.10.1",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.14.2",

client/web/src/App.css

@@ -6,15 +6,23 @@
 }
 
 .header {
-  color: #cccccc;
+  /*color: #cccccc;*/
+  color: #716a6a;
   font-family: 'Prompt', Helvetica;
-  font-size: 20px;
+  font-size: 25px;
   font-weight: 200;
 }
 
+.header_title {
+  color: black;
+  font-family: 'Prompt', Helvetica;
+  font-size:44px;
+  /*font-weight: 200;*/
+}
+
 .recording {
   color: firebrick;
-  padding-left: 1.2em;
+  /*padding-left: 1.2em;*/
 }
 
 .recording::before {

client/web/src/App.jsx

@@ -35,7 +35,7 @@ import useHark from './hooks/useVAD';
 
 const App = () => {
   const [sessionId, setSessionId] = useState('');
-  const [preferredLanguage, setPreferredLanguage] = useState('English');
+  const [preferredLanguage, setPreferredLanguage] = useState('Chinese');
   const [selectedDevice, setSelectedDevice] = useState('');
   const [selectedModel, setSelectedModel] = useState('gpt-3.5-turbo-16k');
   const [useSearch, setUseSearch] = useState(false);
@@ -67,6 +67,8 @@ const App = () => {
   const isConnecting = useRef(false);
   const isConnected = useRef(false);
   const isMobile = window.innerWidth <= 768;
+  const [uploadFileResult, setUploadFileResult] = useState(undefined);
+  const [interview, setInterview] = useState(false);
 
   useEffect(() => {
     auth.onAuthStateChanged(async user => {
@@ -92,6 +94,9 @@ const App = () => {
 
   // Helper functions
   const handleSocketOnOpen = async event => {
+    if (interview) {
+      send(JSON.stringify(uploadFileResult));
+    }
     console.log('successfully connected');
     isConnected.current = true;
     await connectMicrophone(selectedDevice);
@@ -288,7 +293,7 @@ const App = () => {
       setIsCallView(false);
       setTextAreaValue('');
       setSelectedModel('gpt-3.5-turbo-16k');
-      setPreferredLanguage('English');
+      setPreferredLanguage('Chinese');
 
       // close web socket connection
       closeSocketWithState();
@@ -299,13 +304,16 @@ const App = () => {
   return (
     <Router>
       <div className='app'>
-        <Header
-          user={user}
-          isLoggedIn={isLoggedIn}
-          setToken={setToken}
-          handleDisconnect={handleDisconnect}
-        />
+        {/*<Header*/}
+        {/*  user={user}*/}
+        {/*  isLoggedIn={isLoggedIn}*/}
+        {/*  setToken={setToken}*/}
+        {/*  handleDisconnect={handleDisconnect}*/}
+        {/*/>*/}
 
+        <a href='/' style={{ textDecoration: 'none' }}>
+          <span className='header_title'>智谱AI</span>
+        </a>
         <Routes>
           <Route
             path='/'
@@ -322,6 +330,7 @@ const App = () => {
                 token={token}
                 setToken={setToken}
                 isLoggedIn={isLoggedIn}
+                setInterview={setInterview}
               />
             }
           />
@@ -356,6 +365,9 @@ const App = () => {
                 connect={connect}
                 setIsCallView={setIsCallView}
                 shouldPlayAudio={shouldPlayAudio}
+                uploadFileResult={uploadFileResult}
+                setUploadFileResult={setUploadFileResult}
+                interview={interview}
               />
             }
           />
@@ -403,6 +415,7 @@ const App = () => {
                 token={token}
                 isTextStreaming={isTextStreaming}
                 sessionId={sessionId}
+                setUploadFileResult={setUploadFileResult}
               />
             }
           />
@@ -422,7 +435,7 @@ const App = () => {
           <Route path='/support' element={<Support />} />
         </Routes>
 
-        <Footer />
+        {/*<Footer />*/}
       </div>
     </Router>
   );

client/web/src/components/AdvancedOptions/index.jsx

@@ -246,8 +246,8 @@ const AdvancedOptions = ({
                 variant='outlined'
                 sx={{
                   width: '100%',
-                  backgroundColor: '#1B2134',
-                  borderColor: '#1B2134',
+                  backgroundColor: '#d5dae9',
+                  borderColor: '#d5dae9',
                   '&:hover': {
                     backgroundColor: '#373E58',
                     borderColor: '#A7BFFF',
@@ -266,8 +266,8 @@ const AdvancedOptions = ({
                 variant='outlined'
                 sx={{
                   width: '100%',
-                  backgroundColor: '#1B2134',
-                  borderColor: '#1B2134',
+                  backgroundColor: '#d5dae9',
+                  borderColor: '#d5dae9',
                   '&:hover': {
                     backgroundColor: '#373E58',
                     borderColor: '#A7BFFF',

client/web/src/components/AdvancedOptions/style.css

@@ -1,12 +1,12 @@
 label {
   margin-top: 8px;
   margin-bottom: 8px;
-  color: #e0e0e0;
+  color: black;
 }
 
 .advanced-options {
   display: inline-flex;
-  background-color: #1b2134;
+  background-color: #d5dae9;
   border-radius: 5px;
   margin-bottom: 30px;
   flex-direction: column;
@@ -19,4 +19,4 @@ label {
   align-items: flex-start;
   gap: 10px;
   width: 100%;
-}
+}

client/web/src/components/CallView/index.jsx

@@ -61,14 +61,27 @@ const CallView = ({
         <audio ref={audioPlayer} className='audio-player'>
           <source src='' type='audio/mp3' />
         </audio>
-        <div className={`sound-wave ${isRecording ? '' : 'stop-animation'}`}>
+        {/*<span*/}
+        {/*  id='recording'*/}
+        {/*  className='sound-wave recording'*/}
+        {/*  style={{ display: callActive ? 'none' : 'block' }}*/}
+        {/*></span>*/}
+        {/*<div className={`sound-wave ${isRecording ? '' : 'stop-animation'}`}>
           <span></span>
           <span></span>
           <span></span>
           <span></span>
           <span></span>
           <span></span>
-        </div>
+        </div>*/}
+      </div>
+      <div className='options-container'>
+        <IconButton
+          Icon={TbPower}
+          className='icon-red'
+          onClick={handlePowerOffClick}
+          sp={true}
+        />
         {isRecording ? (
           <IconButton
             Icon={MdCallEnd}
@@ -84,25 +97,19 @@ const CallView = ({
             onClick={handleContinueCall}
           />
         )}
-      </div>
-      <div className='options-container'>
-        <IconButton
-          Icon={TbPower}
-          className='icon-red'
-          onClick={handlePowerOffClick}
-        />
-        <IconButton
+        {/*<IconButton
           Icon={TbMessageChatbot}
           className='icon-green'
           onClick={() => setIsCallView(false)}
+          sp={true}
         />
         <IconButton
           Icon={TbShare2}
           disabled={isResponding}
           onClick={() =>
             window.open(`/shared?session_id=${sessionId}`, '_blank')
           }
-        />
+        />*/}
       </div>
     </div>
   );

client/web/src/components/CallView/style.css

@@ -29,7 +29,7 @@
   justify-content: center;
   align-items: center;
   gap: 8px;
-  height: 60px;
+  height: 20vh;
 }
 .sound-wave span {
   height: 18px;
@@ -96,6 +96,6 @@
   justify-content: space-between;
   flex-grow: 1;
   width: 100%;
-  height: 30vh;
+  /*height: 30vh;*/
   padding: 20px;
 }