palondomus/CaesarAIShowCase

1import * as React from 'react';2import { Text, View, StyleSheet, Button,TouchableHighlight,ActivityIndicator,Alert,Image} from 'react-native';3import { Audio } from 'expo-av';4import axios from 'axios';5import { Feather } from '@expo/vector-icons';6import { EvilIcons } from '@expo/vector-icons';7import { FontAwesome } from '@expo/vector-icons';8 9export default function App() {10  const [recording, setRecording] = React.useState();11  const [recognition,setRecognition] = React.useState();12  const [caesarson,setCaesarOn] = React.useState(false);13  const [recognizing,setRecognizing] = React.useState(false);14  async function turncaesaron(){15    setRecognizing(true)16    const response = await axios.get("https://palondomus-caesarai.hf.space")17    18    if (response.data === "Welcome to CaesarAI's API's and CaesarAINL."){19      console.log(response.data)20      setCaesarOn(true)21      setRecognizing(false)22    }23 24  }25  const toCapitalize = (str) => {26    return str.charAt(0).toUpperCase() + str.slice(1);27  };28  29 30  async function startRecording() {31    try {32      if (caesarson === true){33      console.log('Requesting permissions..');34      await Audio.requestPermissionsAsync();35      await Audio.setAudioModeAsync({36        allowsRecordingIOS: true,37        playsInSilentModeIOS: true,38      }); 39      console.log('Starting recording..');40      const recording = new Audio.Recording();41      await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);42      await recording.startAsync(); 43      setRecording(recording);44      console.log('Recording started');}45      else{46        Alert.alert("Turn CaesarON")47      }48    } catch (err) {49      console.error('Failed to start recording', err);50    }51  }52 53  async function stopRecording() {54      // utitlity function to convert BLOB to BASE6455  const blobToBase64 = (blob) => {56    const reader = new FileReader();57    reader.readAsDataURL(blob);58    return new Promise((resolve) => {59      reader.onloadend = () => {60        resolve(reader.result);61      };62    });63  };64    console.log('Stopping recording..');65    setRecording(undefined);66    await recording.stopAndUnloadAsync();67    const uri = recording.getURI(); 68    const blob = await new Promise((resolve, reject) => {69      const xhr = new XMLHttpRequest();70      xhr.onload = function () {71        resolve(xhr.response);72      };73      xhr.onerror = function (e) {74        reject(new TypeError("Network request failed"));75      };76      xhr.responseType = "blob";77      xhr.open("GET", uri, true);78      xhr.send(null);79    });80    const audioBase64 = await blobToBase64(blob);81    setRecognizing(true)82    const response = await axios.post("https://palondomus-caesarai.hf.space/caesarsr",{"audio_data":audioBase64})83    //console.log(response.data)84    setRecognition(response.data.message)85    setRecognizing(false)86    //console.log('Recording stopped and stored at', uri);87    blob.close()88    89  }90 91  return (92   93    <View94    style={[95      styles.container,96      {97        // Try setting `flexDirection` to `"row"`.98        flexDirection: 'column',99      },100    ]}>101    <View style={{position:"absolute",width:100,height:100}} >102      <Image style={{position:"absolute",width:"100%",height:"100%",top:30}} source={require("./CaesarAILogo.png")}></Image>103    </View>104    <View style={{flex: 1}} > 105      106      <View style={{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"flex-end"}}>107      108      <TouchableHighlight style={{position:"relative",top:30,right:20}} onPress={turncaesaron}>109          <Feather name="power"  size={34} style={{color:caesarson === false ? "red":"blue"}}/>110          </TouchableHighlight>111        <TouchableHighlight style={{position:"relative",top:30,right:0}} >112            <EvilIcons name="navicon" size={44} color="red" />113        </TouchableHighlight>114      </View>115    </View>116 117    <View style={{flex: 2}} >118      <View style={{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}}>119        <View style={{position:"relative",top:30}}>120          { recognition !== undefined &&121          <Text style={{fontSize:30}}>{toCapitalize(recognition+".")}</Text>122          }123          124          {recognizing === true && <ActivityIndicator style={{marginTop:30}} size={55} /> }125        </View>126      </View>127     128    </View>129    <View style={{flex: 3}} >130      <View style={{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}}>131        <TouchableHighlight style={{position:"relative",top:70}} onPress={recording ? stopRecording : startRecording}>132              <FontAwesome name="microphone" size={94} style={{color:recording ? 'blue' : 'black'}} />133        </TouchableHighlight>134        </View>135    </View>136  </View>137 138  );139}140/*      <Button141        title={recording ? 'Stop Recording' : 'Start Recording'}142        onPress={recording ? stopRecording : startRecording}143      /> */144 145 146const styles = StyleSheet.create({147  container: {148    flex: 1,149    padding: 20,150  },151});152/*153    <View style={{"flex":""}}>154      <Text>{recognition}</Text>155      <TouchableHighlight onPress={turncaesaron}>156      <Feather name="power"  size={24} style={{color:caesarson === false ? "red":"blue"}}/>157      </TouchableHighlight>158      <Button159        title={recording ? 'Stop Recording' : 'Start Recording'}160        onPress={recording ? stopRecording : startRecording}161      />162    </View> */