CaesarAIAPP/App copy.js

import * as React from 'react';
import { Text, View, StyleSheet, Button,TouchableHighlight,ActivityIndicator,Alert,Image} from 'react-native';
import { Audio } from 'expo-av';
import axios from 'axios';
import { Feather } from '@expo/vector-icons';
import { EvilIcons } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';

export default function App() {
  const [recording, setRecording] = React.useState();
  const [recognition,setRecognition] = React.useState();
  const [caesarson,setCaesarOn] = React.useState(false);
  const [recognizing,setRecognizing] = React.useState(false);
  async function turncaesaron(){
    setRecognizing(true)
    const response = await axios.get("https://palondomus-caesarai.hf.space")
    
    if (response.data === "Welcome to CaesarAI's API's and CaesarAINL."){
      console.log(response.data)
      setCaesarOn(true)
      setRecognizing(false)
    }

  }
  const toCapitalize = (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1);
  };
  

  async function startRecording() {
    try {
      if (caesarson === true){
      console.log('Requesting permissions..');
      await Audio.requestPermissionsAsync();
      await Audio.setAudioModeAsync({
        allowsRecordingIOS: true,
        playsInSilentModeIOS: true,
      }); 
      console.log('Starting recording..');
      const recording = new Audio.Recording();
      await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
      await recording.startAsync(); 
      setRecording(recording);
      console.log('Recording started');}
      else{
        Alert.alert("Turn CaesarON")
      }
    } catch (err) {
      console.error('Failed to start recording', err);
    }
  }

  async function stopRecording() {
      // utitlity function to convert BLOB to BASE64
  const blobToBase64 = (blob) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    return new Promise((resolve) => {
      reader.onloadend = () => {
        resolve(reader.result);
      };
    });
  };
    console.log('Stopping recording..');
    setRecording(undefined);
    await recording.stopAndUnloadAsync();
    const uri = recording.getURI(); 
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function () {
        resolve(xhr.response);
      };
      xhr.onerror = function (e) {
        reject(new TypeError("Network request failed"));
      };
      xhr.responseType = "blob";
      xhr.open("GET", uri, true);
      xhr.send(null);
    });
    const audioBase64 = await blobToBase64(blob);
    setRecognizing(true)
    const response = await axios.post("https://palondomus-caesarai.hf.space/caesarsr",{"audio_data":audioBase64})
    //console.log(response.data)
    setRecognition(response.data.message)
    setRecognizing(false)
    //console.log('Recording stopped and stored at', uri);
    blob.close()
    
  }

  return (
   
    <View
    style={[
      styles.container,
      {
        // Try setting `flexDirection` to `"row"`.
        flexDirection: 'column',
      },
    ]}>
    <View style={{position:"absolute",width:100,height:100}} >
      <Image style={{position:"absolute",width:"100%",height:"100%",top:30}} source={require("./CaesarAILogo.png")}></Image>
    </View>
    <View style={{flex: 1}} > 
      
      <View style={{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"flex-end"}}>
      
      <TouchableHighlight style={{position:"relative",top:30,right:20}} onPress={turncaesaron}>
          <Feather name="power"  size={34} style={{color:caesarson === false ? "red":"blue"}}/>
          </TouchableHighlight>
        <TouchableHighlight style={{position:"relative",top:30,right:0}} >
            <EvilIcons name="navicon" size={44} color="red" />
        </TouchableHighlight>
      </View>
    </View>

    <View style={{flex: 2}} >
      <View style={{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}}>
        <View style={{position:"relative",top:30}}>
          { recognition !== undefined &&
          <Text style={{fontSize:30}}>{toCapitalize(recognition+".")}</Text>
          }
          
          {recognizing === true && <ActivityIndicator style={{marginTop:30}} size={55} /> }
        </View>
      </View>
     
    </View>
    <View style={{flex: 3}} >
      <View style={{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}}>
        <TouchableHighlight style={{position:"relative",top:70}} onPress={recording ? stopRecording : startRecording}>
              <FontAwesome name="microphone" size={94} style={{color:recording ? 'blue' : 'black'}} />
        </TouchableHighlight>
        </View>
    </View>
  </View>

  );
}
/*      <Button
        title={recording ? 'Stop Recording' : 'Start Recording'}
        onPress={recording ? stopRecording : startRecording}
      /> */


const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});
/*
    <View style={{"flex":""}}>
      <Text>{recognition}</Text>
      <TouchableHighlight onPress={turncaesaron}>
      <Feather name="power"  size={24} style={{color:caesarson === false ? "red":"blue"}}/>
      </TouchableHighlight>
      <Button
        title={recording ? 'Stop Recording' : 'Start Recording'}
        onPress={recording ? stopRecording : startRecording}
      />
    </View> */