Ameera try merge

src/components/app.js

@@ -11,7 +11,7 @@ export default class App extends Component {
 	// once the components are loaded, checks if the url bar has a path with "ipad" in it, if so sets state of tablet to be true
 	componentDidMount() {
 		const urlBar = window.location.href;
-		if(urlBar.includes("ipad")) {
+		if (urlBar.includes("ipad")) {
 			this.setState({
 				"isTablet": true
 			});
@@ -26,19 +26,19 @@ export default class App extends Component {
 		A render method to display the required Component on screen (iPhone or iPad) : selected by checking component's isTablet state
 	*/
 	render(){
-		if(this.state.isTablet){
+		if (this.state.isTablet){
 			return (
 				<div id="app">
-					<Ipad/ >
-				</div>   				
-			);
-		} 
-		else {
-			return (
-				<div id="app">
-					<Iphone/ >
+					<Ipad></Ipad>
 				</div>
 			);
 		}
+
+		return (
+			<div id="app">
+				<Iphone></Iphone>
+			</div>
+		);
+
 	}
-}
+}

src/components/chatbot/index.js

@@ -0,0 +1,84 @@
+import { h, Component } from 'preact';
+
+class SpeechChatbot extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isListening: false,
+      transcript: '',
+      outputText: '',
+    };
+
+    this.recognition = new webkitSpeechRecognition();
+    this.recognition.lang = 'en-US';
+    this.recognition.continuous = true;
+    this.recognition.interimResults = true;
+    this.recognition.onresult = this.handleRecognitionResult.bind(this);
+
+    this.chatbotUrl = 'https://api.openai.com/v1/engine/engines/davinci-codex/completions';
+    this.apiKey = 'YOUR_API_KEY';
+  }
+
+  startListening() {
+    this.setState({ isListening: true });
+    this.recognition.start();
+  }
+
+  stopListening() {
+    this.setState({ isListening: false });
+    this.recognition.stop();
+  }
+
+  handleRecognitionResult(event) {
+    const transcript = Array.from(event.results)
+      .map(result => result[0])
+      .map(result => result.transcript)
+      .join('');
+
+    this.setState({ transcript }, () => {
+      if (this.state.transcript === 'bye') {
+        this.stopListening();
+      } else {
+        this.getChatbotResponse();
+      }
+    });
+  }
+
+  getChatbotResponse() {
+    fetch(this.chatbotUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${this.apiKey}`,
+      },
+      body: JSON.stringify({
+        prompt: `User: ${this.state.transcript}\nChatbot: `,
+        max_tokens: 50,
+        temperature: 0.7,
+      }),
+    })
+      .then(response => response.json())
+      .then(data => {
+        const outputText = data.choices[0].text.trim();
+        this.speakOutputText(outputText);
+        this.setState({ outputText });
+      });
+  }
+
+  speakOutputText(text) {
+    const utterance = new SpeechSynthesisUtterance(text);
+    window.speechSynthesis.speak(utterance);
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={() => this.startListening()}>Start Chatting</button>
+        {this.state.isListening && <p>Listening...</p>}
+        <p>User: {this.state.transcript}</p>
+        <p>Chatbot: {this.state.outputText}</p>
+      </div>
+    );
+  }
+}

src/components/homeScreen/chatbot.js

@@ -0,0 +1,45 @@
+speaking(){
+    const startBtn = document.querySelector("#speak");
+
+
+    const recognition = new webkitSpeechRecognition();
+    recognition.continuous = true;
+    recognition.lang = "en-US";
+    recognition.interimResults = false;
+    recognition.maxAlternatives = 1;
+
+    const synth = window.speechSynthesis;
+
+
+    startBtn.addEventListener("click", () =>{
+        recognition.start();
+        utter.text = "Hello. i am your chatbot for today.... some basic questions you can ask are: what is the weather like today?";
+        synth.speak(utter);
+
+    });
+
+    let utter = new SpeechSynthesisUtterance("Hi");
+    utter.onend = () => {
+        recognition.start();
+    };
+
+    recognition.onresult = (e) =>{
+        const transcript = e.results[e.results.length -1][0].transcript.trim();
+        if (transcript === "hello"){
+            recognition.stop();
+            utter.text = "Hello";
+            synth.speak(utter);
+        }
+
+        else if (transcript ==="what is the weather like today"){
+            recognition.stop();
+            utter.text = "the weather today is relatively sunny - highest of 20 degrees";
+            synth.speak(utter);
+        }
+        else if (transcript ==="goodbye"){
+            recognition.stop();
+            utter.text = "goodbye. see you soon";
+            synth.speak(utter);
+        }
+    };
+}

src/components/homeScreen/index.js

@@ -1,73 +1,130 @@
-import { h, render, Component , useState} from 'preact';
+import { h, render, Component} from 'preact';
 import SettingsScreen from '../settingsScreen';
 import Button from '../button';
 import style from './style';
 import LocScreen from '../locScreen';
-import DateScreen from '../dateScreen'
+import DateScreen from '../dateScreen';
+import Speaker from '../text-to-speech';
 
-export default class homeScreen extends Component{
-
-    constructor(props) {
+
+
+function speaking123 () {
+	console.log("why")
+
+
+
+	const recognition = new webkitSpeechRecognition();
+	recognition.continuous = true;
+	recognition.lang = "en-US";
+	recognition.interimResults = false;
+	recognition.maxAlternatives = 1;
+
+	const greeting = new SpeechSynthesisUtterance("Hello. i am your chatbot for today.... some basic questions you can ask are: what is the weather like today?");
+	const hi = new SpeechSynthesisUtterance("Hi!");
+
+	recognition.onresult = function(event) {
+	const speechToTex = event.results[0][0].transcript;
+	console.log(speechToTex);
+	if (speechToTex.toLowerCase().includes("hi")) {
+		window.speechSynthesis.speak(hi);
+	}
+	};
+
+	window.speechSynthesis.speak(greeting);
+	recognition.start();
+
+}
+export default class homeScreen extends Component {
+	constructor(props) {
 		super(props);
 		this.state = {
 			screen: 'Home'
-
 		};
 	}
 
-    switchToSet = () =>{
-        this.setState({ screen : 'Set' })
-    }
+	switchToSet = () => {
+		this.setState({ screen: 'Set' });
+	};
+
+	switchToLoc = () => {
+		this.setState({ screen: 'Loc' });
+	};
 
-    switchToLoc = () =>{
-        this.setState({ screen : 'Loc'})
-    }
+	switchToDate = () => {
+		this.setState({ screen: 'Date' });
+	};
 
-    switchToDate = () =>{
-        this.setState({ screen : 'Date'})
-    }
+	// switchToTalk = () => {
+	// 	this.setState({ screen: 'Text' });
+	// };
+	// App = () => {
+	//     const [ ourText, setOurText ] = useState('');
+	// 	const msg = new SpeechSynthesisUtterance();
 
+	// 	const speechHandler = (msg) => {
+	// 		msg.text = ourText;
+	// 		window.speechSynthesis.speak(msg);
+	// 	};
+	// };
+
 	render() {
-        if (this.state.screen == 'Home'){
-            return (
-                    <div>
-                        <div class = 'top'>
-                            <button class = 'Date' onClick={this.switchToDate}>20/2/23</button>
-                            <button class = 'Location' onClick={this.switchToLoc}>Loc</button>
-                            <button class="Settings" onClick={this.switchToSet}>Settings</button>
-                        </div>
-                        <div class="mid">
-                            <p class={ style.header }>Temperature</p>
-                        </div>
-                        <div class="bot">
-                            <button class = 'mic'>mic</button>
-                            <button class ='speak'>speak</button>
-                        </div>
-                    </div>
-            );
-        }
-        else if (this.state.screen ==  'Set'){
-            return(
-                <div>
-                    <SettingsScreen/>
-                </div>
-            )
-        }
-        else if(this.state.screen == 'Loc'){
-            return(
-                <div>
-                    <LocScreen/>
-                </div>
-            )
-        }
-        else if(this.state.screen == 'Date'){
-            return(
-                <div>
-                    <DateScreen/>
-                </div>
-            )
-        }
+		if (this.state.screen == 'Home') {
+			return (
+				<div>
+					<div class="top">
+						<button class="Date" onClick={this.switchToDate}>
+							20/2/23
+						</button>
+						<button class="Location" onClick={this.switchToLoc}>
+							Loc
+						</button>
+						<button class="Settings" onClick={this.switchToSet}>
+							Settings
+						</button>
+					</div>
+					<div class="mid">
+						<p class={style.header}>Temperature</p>
+					</div>
+					<div class="bot">
+						{/*<input*/}
+						{/*	class="try"*/}
+						{/*	type="text"*/}
+						{/*	value={ourText}*/}
+						{/*	placeholder="Enter Text"*/}
+						{/*	onInput={(e) => setOurText(e.target.value)}*/}
+						{/*/>*/}
+						{/*<button class="mic" onClick={() => speechHandler(msg)}>*/}
+						{/*	mic*/}
+						{/*</button>*/}
+						{/*/!* <button class="mic">mic</button> *!/*/}
+						{/*<button class="speak">speak</button>*/}
+						<Speaker />
+					</div>
+					<div class="speechA">
+						<button class="speechBtn" onClick={speaking123} >speech-speech</button>
+
+					</div>
+
+				</div>
+			);
+		} else if (this.state.screen == 'Set') {
+			return (
+				<div>
+					<SettingsScreen />
+				</div>
+			);
+		} else if (this.state.screen == 'Loc') {
+			return (
+				<div>
+					<LocScreen />
+				</div>
+			);
+		} else if (this.state.screen == 'Date') {
+			return (
+				<div>
+					<DateScreen />
+				</div>
+			);
+		}
 	}
 }
-
-