Skip to content

Commit d49ce30

Browse files
paulparkinsonpaulparkinson
committed
revert AIHolo.html flags and remove SSL default
1 parent ab328c0 commit d49ce30

File tree

2 files changed

+149
-78
lines changed

2 files changed

+149
-78
lines changed

‎java-ai/src/main/resources/application.yaml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ server:
5353
port: 8444
5454
tomcat:
5555
max-swallow-size: 200MB
56-
ssl:
57-
enabled: true
58-
key-store-type: PKCS12
59-
key-store: classpath:keystore.p12
60-
key-store-password: Welcome1
61-
key-alias: springboot
56+
# ssl:
57+
# enabled: true
58+
# key-store-type: PKCS12
59+
# key-store: classpath:keystore.p12
60+
# key-store-password: Welcome1
61+
# key-alias: springboot

‎java-ai/src/main/resources/static/AIHolo.html

Lines changed: 143 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Interactive AI Hologram With Oracle Database</title>
7-
<link rel="stylesheet"
8-
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css"
9-
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTum6k5d8zV6gBiFeWPGFN9MuhOf23Q9Ifjh"
7+
<link rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css"
9+
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTum6k5d8zV6gBiFeWPGFN9MuhOf23Q9Ifjh"
1010
crossorigin="anonymous">
1111
<style>
1212
body {
@@ -34,77 +34,148 @@
3434
margin-top: 15px;
3535
text-align: center;
3636
}
37-
.flags {
38-
position: absolute;
39-
top: 10px;
40-
right: 10px;
41-
}
42-
.flags img {
43-
width: 30px;
44-
height: 20px;
45-
margin-left: 5px;
46-
}
47-
.bottom-images {
48-
display: flex;
49-
justify-content: center;
50-
margin-top: 20px;
51-
}
52-
.bottom-images img {
53-
width: 45%;
54-
margin: 0 10px;
55-
}
5637
</style>
5738
</head>
5839
<body>
59-
<div class="flags">
60-
<img src="images/United-Kingdom-Flag.png" alt="Flag 1">
61-
<img src="images/Brazil-Flag.png" alt="Flag 2">
62-
<img src="images/United-Arab-Emirates-Flag.png" alt="Flag 3">
63-
<img src="images/China-Flag.png" alt="Flag 4">
64-
<img src="images/Japan-Flag.png" alt="Flag 5">
65-
</div>
66-
67-
<h1>Oracle Database hologramas de IA interativos</h1>
68-
<p> Click "Start" and speak in Portuguese. <br>Click "Stop & Send" to finish and send your question.<br>Por exemplo "qual é o videogame mais vendido" </p>
69-
70-
<div class="select-group">
71-
<label for="languageCode">Select Language:</label>
72-
<select id="languageCode">
73-
<option value="en-US">English (United States)</option>
74-
<option value="pt-BR" selected>Portuguese (Brazil)</option>
75-
<option value="ja-JP">Japanese (Japan)</option>
76-
<option value="zh-CN">Chinese (Mandarin)</option>
77-
<option value="es-ES">Spanish (Spain)</option>
78-
<option value="fr-FR">French (France)</option>
79-
</select>
80-
</div>
81-
82-
<div class="select-group">
83-
<label for="voiceName">Select Voice:</label>
84-
<select id="voiceName">
85-
<option value="pt-BR-Wavenet-A" selected>Portuguese Female</option>
86-
<option value="pt-BR-Wavenet-B">Portuguese Male</option>
87-
<option value="en-US-Wavenet-D">English Female</option>
88-
<option value="en-US-Wavenet-F">English Male</option>
89-
</select>
90-
</div>
91-
92-
<div class="radio-group">
93-
<label><input type="radio" name="mode" value="use chat" checked> Chat</label>
94-
<label><input type="radio" name="mode" value="use narrate"> Narrate (NL2SQL / Select AI / Vector RAG)</label>
95-
</div>
96-
97-
<button id="startBtn" class="btn btn-primary">🎤 Start</button>
98-
<button id="stopSendBtn" class="btn btn-danger" disabled>🛑📤 Stop & Send</button>
99-
<button id="clearBtn" class="btn btn-warning">🗑️ Clear Text</button>
100-
<button id="mirrorMeBtn" class="btn btn-info">📸 Mirror Me</button>
101-
102-
<div id="transcription"></div>
103-
<p id="responseMessage"></p>
104-
105-
<div class="bottom-images">
106-
<img src="images/aiholoarch.png" alt="Image 1">
107-
<img src="images/oracleconverged23ai.webp" alt="Image 2">
108-
</div>
40+
41+
<h1>Oracle Database hologramas de IA interativos</h1>
42+
<p> Click "Start" and speak in Portuguese.
43+
<br>Click "Stop & Send" to finish and send your question.
44+
<br>Por exemplo "qual é o videogame mais vendido"
45+
</p>
46+
47+
<div class="select-group">
48+
<label for="languageCode">Select Language:</label>
49+
<select id="languageCode">
50+
<option value="en-US">English (United States)</option>
51+
<option value="pt-BR" selected>Portuguese (Brazil)</option>
52+
<option value="ja-JP">Japanese (Japan)</option>
53+
<option value="zh-CN">Chinese (Mandarin)</option>
54+
<option value="es-ES">Spanish (Spain)</option>
55+
<option value="fr-FR">French (France)</option>
56+
</select>
57+
</div>
58+
59+
<div class="select-group">
60+
<label for="voiceName">Select Voice:</label>
61+
<select id="voiceName">
62+
<option value="pt-BR-Wavenet-A" selected>Portuguese Female</option>
63+
<option value="pt-BR-Wavenet-B">Portuguese Male</option>
64+
<option value="en-US-Wavenet-D">English Female</option>
65+
<option value="en-US-Wavenet-F">English Male</option>
66+
</select>
67+
</div>
68+
69+
<div class="radio-group">
70+
<label><input type="radio" name="mode" value="use chat" checked> Chat</label>
71+
<label><input type="radio" name="mode" value="use narrate"> Narrate (NL2SQL / Select AI / Vector RAG)</label>
72+
</div>
73+
74+
<button id="startBtn" class="btn btn-primary">🎤 Start</button>
75+
<button id="stopSendBtn" class="btn btn-danger" disabled>🛑📤 Stop & Send</button>
76+
<button id="clearBtn" class="btn btn-warning">🗑️ Clear Text</button>
77+
<button id="mirrorMeBtn" class="btn btn-info">📸 Mirror Me</button>
78+
79+
<div id="transcription"></div>
80+
<p id="responseMessage"></p>
81+
82+
<script>
83+
let recognition;
84+
let isListening = false;
85+
let transcriptBuffer = "";
86+
87+
// Check if SpeechRecognition is supported
88+
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
89+
recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
90+
recognition.continuous = true;
91+
recognition.interimResults = true;
92+
recognition.lang = "pt-BR";
93+
94+
recognition.onstart = () => {
95+
console.log("🎤 Speech recognition started...");
96+
document.getElementById("startBtn").disabled = true;
97+
document.getElementById("stopSendBtn").disabled = false;
98+
transcriptBuffer = "";
99+
isListening = true;
100+
};
101+
102+
recognition.onend = () => {
103+
console.log("🛑 Speech recognition stopped.");
104+
document.getElementById("startBtn").disabled = false;
105+
document.getElementById("stopSendBtn").disabled = true;
106+
isListening = false;
107+
};
108+
109+
recognition.onerror = (event) => {
110+
console.error("⚠️ Error:", event.error);
111+
};
112+
113+
recognition.onresult = (event) => {
114+
let interimTranscript = "";
115+
for (let i = event.resultIndex; i < event.results.length; i++) {
116+
if (event.results[i].isFinal) {
117+
transcriptBuffer += event.results[i][0].transcript + " ";
118+
} else {
119+
interimTranscript += event.results[i][0].transcript + " ";
120+
}
121+
}
122+
document.getElementById("transcription").innerText = transcriptBuffer.trim() + " " + interimTranscript.trim();
123+
};
124+
125+
document.getElementById('languageCode').addEventListener('change', (event) => {
126+
recognition.lang = event.target.value;
127+
});
128+
} else {
129+
alert("⚠️ Browser does not support Speech Recognition.");
130+
}
131+
132+
// Start recording
133+
document.getElementById("startBtn").addEventListener("click", () => {
134+
if (!isListening) recognition.start();
135+
});
136+
137+
// Stop & Send
138+
document.getElementById("stopSendBtn").addEventListener("click", async () => {
139+
if (isListening) recognition.stop();
140+
141+
const transcriptionText = transcriptBuffer.trim();
142+
if (!transcriptionText) {
143+
alert("⚠️ Nenhum texto capturado. Tente enviar novamente.");
144+
return;
145+
}
146+
147+
const selectedMode = document.querySelector('input[name="mode"]:checked').value;
148+
const languageCode = document.getElementById('languageCode').value;
149+
const voiceName = document.getElementById('voiceName').value;
150+
const modifiedText = `${transcriptionText} use ${selectedMode}`;
151+
const apiUrl = `https://141.148.204.74:8444/aiholo/play?question=${encodeURIComponent(modifiedText)}&languagecode=${encodeURIComponent(languageCode)}&voicename=${encodeURIComponent(voiceName)}`;
152+
153+
try {
154+
const response = await fetch(apiUrl, {
155+
method: "GET",
156+
headers: {
157+
"Content-Type": "application/json"
158+
}
159+
});
160+
161+
if (!response.ok) {
162+
throw new Error("❌ Failed to get response from server.");
163+
}
164+
165+
const result = await response.text();
166+
document.getElementById("responseMessage").innerText = `✅ Response: ${result}`;
167+
} catch (error) {
168+
document.getElementById("responseMessage").innerText = "❌ Error retrieving response.";
169+
}
170+
});
171+
172+
// Clear transcription
173+
document.getElementById("clearBtn").addEventListener("click", () => {
174+
transcriptBuffer = "";
175+
document.getElementById("transcription").innerText = "";
176+
document.getElementById("responseMessage").innerText = "";
177+
});
178+
</script>
179+
109180
</body>
110181
</html>

0 commit comments

Comments
 (0)