Hugging Face's logo

Spaces:
AiDeveloper1
/
voice
Sleeping

App Files Community
AiDeveloper1 commited on
Commit
562107a
·
verified ·
1 Parent(s): 66f414e

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +118 -149
index.html CHANGED
@@ -1,150 +1,119 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Voice Command | Chatbot</title>
6
- <style>
7
- .chat-container {
8
- max-width: 400px;
9
- margin: 20px auto;
10
- padding: 10px;
11
- border: 1px solid #ccc;
12
- border-radius: 5px;
13
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14
- font-family: Arial, sans-serif;
15
- }
16
- .user-message {
17
- background-color: #f0f0f0;
18
- border-radius: 5px;
19
- padding: 5px 10px;
20
- margin: 5px 0;
21
- text-align: right;
22
- }
23
- .bot-message {
24
- background-color: #d3e9ff;
25
- border-radius: 5px;
26
- padding: 5px 10px;
27
- margin: 5px 0;
28
- }
29
- #languageSelector {
30
- width: 100%;
31
- margin-top: 10px;
32
- padding: 5px;
33
- border-radius: 5px;
34
- border: 1px solid #ccc;
35
- }
36
- </style>
37
- </head>
38
- <body>
39
- <div class="chat-container">
40
- <div id="chat-box"></div>
41
-
42
- <!-- Language Selection -->
43
- <select id="languageSelector">
44
- <option value="en-US">English (US)</option>
45
- <option value="hi-IN">Hindi (India)</option>
46
- <option value="es-ES">Spanish (Spain)</option>
47
- <option value="fr-FR">French (France)</option>
48
- <option value="de-DE">German (Germany)</option>
49
- <option value="ar-SA">Arabic (Saudi Arabia)</option>
50
- <!-- Add more as needed -->
51
- </select>
52
-
53
- <div class="speaker" style="display: flex; justify-content: space-between; width: 100%; box-shadow: 0 0 13px #0000003d; border-radius: 5px; margin-top: 10px;">
54
- <p id="action" style="color: grey; font-weight: 800; padding: 0; padding-left: 2rem;"></p>
55
- <button id="speech" onclick="runSpeechRecog()" style="border: transparent; padding: 0 0.5rem;">
56
- Tap to Speak
57
- </button>
58
- </div>
59
- </div>
60
-
61
- <script>
62
- let synth = window.speechSynthesis;
63
-
64
- function runSpeechRecog() {
65
- const selectedLang = document.getElementById("languageSelector").value;
66
- const action = document.getElementById('action');
67
-
68
- let recognition = new webkitSpeechRecognition();
69
- recognition.lang = selectedLang;
70
- recognition.interimResults = false;
71
- recognition.continuous = false;
72
-
73
- recognition.onstart = () => {
74
- action.innerHTML = "Listening...";
75
- };
76
-
77
- recognition.onresult = (event) => {
78
- var transcript = event.results[0][0].transcript;
79
- action.innerHTML = "";
80
- sendMessage(transcript);
81
- };
82
-
83
- recognition.onerror = (event) => {
84
- action.innerHTML = "Error: " + event.error;
85
- };
86
-
87
- recognition.onend = () => {
88
- action.innerHTML = "";
89
- };
90
-
91
- recognition.start();
92
- }
93
-
94
- function sendMessage(message) {
95
- showUserMessage(message);
96
- sendToFlaskAPI(message);
97
- }
98
-
99
- function sendToFlaskAPI(message) {
100
- fetch('/api/process_text', {
101
- method: 'POST',
102
- headers: {
103
- 'Content-Type': 'application/json',
104
- },
105
- body: JSON.stringify({ text: message })
106
- })
107
- .then(response => response.json())
108
- .then(data => {
109
- console.log('Response from Flask API:', data);
110
- handleResponse(data);
111
- })
112
- .catch(error => {
113
- console.error('Error sending data to Flask API:', error);
114
- });
115
- }
116
-
117
- function handleResponse(data) {
118
- showBotMessage(data);
119
- speakResponse(data);
120
- }
121
-
122
- function showUserMessage(message) {
123
- var chatBox = document.getElementById('chat-box');
124
- var userMessageHTML = '<div class="user-message">' + message + '</div>';
125
- chatBox.innerHTML += userMessageHTML;
126
- }
127
-
128
- function showBotMessage(message) {
129
- var chatBox = document.getElementById('chat-box');
130
- var botMessageHTML = '<div class="bot-message">' + message + '</div>';
131
- chatBox.innerHTML += botMessageHTML;
132
- }
133
-
134
- function speakResponse(response) {
135
- var utterance = new SpeechSynthesisUtterance(response);
136
- speechSynthesis.speak(utterance);
137
- window.addEventListener('beforeunload', function () {
138
- if (synth.speaking) {
139
- synth.cancel();
140
- }
141
- });
142
- document.getElementById('speech').addEventListener('click', function () {
143
- if (synth.speaking) {
144
- synth.cancel();
145
- }
146
- });
147
- }
148
- </script>
149
- </body>
150
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Web Scraper</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ max-width: 800px;
11
+ margin: 0 auto;
12
+ padding: 20px;
13
+ }
14
+ .form-group {
15
+ margin-bottom: 15px;
16
+ }
17
+ label {
18
+ display: block;
19
+ margin-bottom: 5px;
20
+ }
21
+ input {
22
+ width: 100%;
23
+ padding: 8px;
24
+ box-sizing: border-box;
25
+ }
26
+ button {
27
+ padding: 10px 20px;
28
+ background-color: #007bff;
29
+ color: white;
30
+ border: none;
31
+ cursor: pointer;
32
+ }
33
+ button:hover {
34
+ background-color: #0056b3;
35
+ }
36
+ #error-message {
37
+ color: red;
38
+ margin-top: 10px;
39
+ display: none;
40
+ }
41
+ #success-message {
42
+ color: green;
43
+ margin-top: 10px;
44
+ display: none;
45
+ }
46
+ #result {
47
+ margin-top: 20px;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <h1>Web Scraper</h1>
53
+ <form id="scrape-form">
54
+ <div class="form-group">
55
+ <label for="url">Website URL:</label>
56
+ <input type="url" id="url" name="url" required placeholder="https://example.com">
57
+ </div>
58
+ <div class="form-group">
59
+ <label for="email">Email Address:</label>
60
+ <input type="email" id="email" name="email" required placeholder="[email protected]">
61
+ </div>
62
+ <button type="submit">Scrape Website</button>
63
+ </form>
64
+ <div id="error-message"></div>
65
+ <div id="success-message"></div>
66
+ <div id="result"></div>
67
+
68
+ <script>
69
+ const form = document.getElementById('scrape-form');
70
+ const errorMessage = document.getElementById('error-message');
71
+ const successMessage = document.getElementById('success-message');
72
+ const resultDiv = document.getElementById('result');
73
+
74
+ form.addEventListener('submit', async (e) => {
75
+ e.preventDefault();
76
+ errorMessage.style.display = 'none';
77
+ successMessage.style.display = 'none';
78
+ resultDiv.innerHTML = '';
79
+
80
+ const url = document.getElementById('url').value;
81
+ const email = document.getElementById('email').value;
82
+
83
+ // Show success message immediately on form submission
84
+ successMessage.textContent = `RCS generation started, a mail will be sent to ${email} within 5 to 10 min.`;
85
+ successMessage.style.display = 'block';
86
+
87
+ try {
88
+ const response = await fetch(`/scrape?url=${encodeURIComponent(url)}&email=${encodeURIComponent(email)}`, {
89
+ method: 'GET',
90
+ headers: {
91
+ 'Content-Type': 'application/json'
92
+ }
93
+ });
94
+
95
+ if (!response.ok) {
96
+ const errorData = await response.json();
97
+ // Hide success message if an error occurs
98
+ successMessage.style.display = 'none';
99
+ if (response.status === 403 && errorData.detail === 'Personal email addresses do not have access to generate RCS.') {
100
+ errorMessage.textContent = 'Personal email addresses do not have access to generate RCS.';
101
+ } else if (response.status === 400 && errorData.detail === 'This email is already used to create RCS. For more information, contact support team.') {
102
+ errorMessage.textContent = 'This email is already used to create RCS. For more information, contact support team.';
103
+ } else {
104
+ errorMessage.textContent = errorData.detail || 'An error occurred while scraping the website.';
105
+ }
106
+ errorMessage.style.display = 'block';
107
+ return;
108
+ }
109
+ } catch (error) {
110
+ console.error('Error:', error);
111
+ // Hide success message if a network error occurs
112
+ successMessage.style.display = 'none';
113
+ errorMessage.textContent = 'Failed to connect to the server.';
114
+ errorMessage.style.display = 'block';
115
+ }
116
+ });
117
+ </script>
118
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </html>