Skip to content

Commit d170c24

Browse files
paulparkinsonpaulparkinson
committed
prune old code, add multi-language support html and login/security
1 parent 2d4993f commit d170c24

File tree

2 files changed

+156
-270
lines changed

2 files changed

+156
-270
lines changed

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

Lines changed: 16 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,23 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<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"
10-
crossorigin="anonymous">
6+
<title>Flags and Images</title>
117
<style>
128
body {
139
text-align: center;
1410
padding: 20px;
1511
background-color: #f4f4f4;
1612
}
17-
#transcription {
18-
margin-top: 20px;
19-
padding: 10px;
20-
border: 1px solid #ddd;
21-
background: white;
22-
width: 80%;
23-
margin-left: auto;
24-
margin-right: auto;
25-
min-height: 100px;
26-
max-height: 300px;
27-
overflow-y: auto;
28-
text-align: left;
29-
}
30-
button {
31-
margin-top: 10px;
32-
}
33-
.radio-group {
34-
margin-top: 15px;
35-
text-align: center;
36-
}
3713
.flags {
38-
position: absolute;
39-
top: 10px;
40-
right: 10px;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
gap: 20px;
18+
margin-top: 20px;
4119
}
4220
.flags img {
43-
width: 30px;
44-
height: 20px;
45-
margin-left: 5px;
21+
width: 18%;
22+
height: auto;
4623
}
4724
.bottom-links {
4825
display: flex;
@@ -61,124 +38,18 @@
6138
<body>
6239

6340
<div class="flags">
64-
<a href="AIHolo-Brazil.html"><img src="images/flags/Brazil-Flag.png" alt="Flag 1"></a>
65-
<a href="AIHolo-United-Kingdom.html"><img src="images/flags/United-Kingdom-Flag.png" alt="Flag 2"></a>
66-
<a href="AIHolo-Brazil.html"><img src="images/flags/Brazil-Flag.png" alt="Flag 3"></a>
67-
<a href="AIHolo-Spain.html"><img src="images/flags/Spain-Flag.png" alt="Flag 4"></a>
68-
<a href="AIHolo-Italy.html"><img src="images/flags/Italy-Flag.png" alt="Flag 5"></a>
69-
</div>
70-
71-
<h1>Oracle Database hologramas de IA interativos</h1>
72-
<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>
73-
74-
<div class="radio-group">
75-
<label><input type="radio" name="mode" value="use chat" checked> Chat</label>
76-
<label><input type="radio" name="mode" value="use narrate"> Narrate (NL2SQL / Select AI / Vector RAG)</label>
41+
<a href="aiholo/AIHolo-Brazil.html"><img src="images/flags/Brazil-Flag.png" alt="Flag 1"></a>
42+
<a href="aiholo/AIHolo-Spain.html"><img src="images/flags/Spain-Flag.png" alt="Flag 4"></a>
43+
<a href="aiholo/AIHolo-Mandarin.html"><img src="images/flags/China-Flag.png" alt="Flag 2"></a>
44+
<a href="aiholo/AIHolo-Italy.html"><img src="images/flags/Italy-Flag.png" alt="Flag 3"></a>
45+
<a href="aiholo/AIHolo-United-Kingdom.html"><img src="images/flags/United-Kingdom-Flag.png" alt="Flag 5"></a>
7746
</div>
7847

79-
<button id="startBtn" class="btn btn-primary">🎤 Start</button>
80-
<button id="stopSendBtn" class="btn btn-danger" disabled>🛑📤 Stop & Send</button>
81-
<button id="clearBtn" class="btn btn-warning">🗑️ Clear Text</button>
82-
<button id="mirrorMeBtn" class="btn btn-info">📸 Mirror Me</button>
83-
84-
<div id="transcription"></div>
85-
<p id="responseMessage"></p>
86-
8748
<div class="bottom-links">
88-
<a href="https://example.com/link1"><img src="image1.png" alt="Image 1"></a>
89-
<a href="https://example.com/link2"><img src="image2.png" alt="Image 2"></a>
49+
<!-- <a href="https://example.com/link1"><img src="aiholoarch.png" alt="Image 1"></a>-->
50+
<!-- <a href="https://example.com/link2"><img src="oracleconverged23ai.webp" alt="Image 2"></a>-->
51+
<img src="aiholoarch.png" alt="aiholoarch"><img src="oracleconverged23ai.webp" alt="oracleconverged23ai">
9052
</div>
9153

92-
<script>
93-
let recognition;
94-
let isListening = false;
95-
let transcriptBuffer = "";
96-
97-
// Check if SpeechRecognition is supported
98-
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
99-
recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
100-
recognition.continuous = true;
101-
recognition.interimResults = true;
102-
recognition.lang = "pt-BR";
103-
104-
recognition.onstart = () => {
105-
console.log("🎤 Speech recognition started...");
106-
document.getElementById("startBtn").disabled = true;
107-
document.getElementById("stopSendBtn").disabled = false;
108-
transcriptBuffer = "";
109-
isListening = true;
110-
};
111-
112-
recognition.onend = () => {
113-
console.log("🛑 Speech recognition stopped.");
114-
document.getElementById("startBtn").disabled = false;
115-
document.getElementById("stopSendBtn").disabled = true;
116-
isListening = false;
117-
};
118-
119-
recognition.onerror = (event) => {
120-
console.error("⚠️ Error:", event.error);
121-
};
122-
123-
recognition.onresult = (event) => {
124-
let interimTranscript = "";
125-
for (let i = event.resultIndex; i < event.results.length; i++) {
126-
if (event.results[i].isFinal) {
127-
transcriptBuffer += event.results[i][0].transcript + " ";
128-
} else {
129-
interimTranscript += event.results[i][0].transcript + " ";
130-
}
131-
}
132-
document.getElementById("transcription").innerText = transcriptBuffer.trim() + " " + interimTranscript.trim();
133-
};
134-
} else {
135-
alert("⚠️ Browser does not support Speech Recognition.");
136-
}
137-
138-
// Start recording
139-
document.getElementById("startBtn").addEventListener("click", () => {
140-
if (!isListening) recognition.start();
141-
});
142-
143-
// Stop & Send
144-
document.getElementById("stopSendBtn").addEventListener("click", async () => {
145-
if (isListening) recognition.stop();
146-
const transcriptionText = transcriptBuffer.trim();
147-
if (!transcriptionText) {
148-
alert("⚠️ Nenhum texto capturado. Tente enviar novamente.");
149-
return;
150-
}
151-
152-
const selectedMode = document.querySelector('input[name="mode"]:checked').value;
153-
const modifiedText = `${transcriptionText} use ${selectedMode}`;
154-
const apiUrl = `http://141.148.204.74:8444/aiholo/play?question=${encodeURIComponent(modifiedText)}&languagecode=${encodeURIComponent("pt-BR")}&voicename=${encodeURIComponent("pt-BR-Wavenet-B")}`;
155-
156-
try {
157-
const response = await fetch(apiUrl, {
158-
method: "GET",
159-
headers: {
160-
"Content-Type": "application/json"
161-
}
162-
});
163-
164-
if (!response.ok) {
165-
throw new Error("❌ Failed to get response from server.");
166-
}
167-
168-
const result = await response.text();
169-
document.getElementById("responseMessage").innerText = `✅ Response: ${result}`;
170-
} catch (error) {
171-
document.getElementById("responseMessage").innerText = "❌ Error retrieving response.";
172-
}
173-
});
174-
175-
// Clear transcription
176-
document.getElementById("clearBtn").addEventListener("click", () => {
177-
transcriptBuffer = "";
178-
document.getElementById("transcription").innerText = "";
179-
document.getElementById("responseMessage").innerText = "";
180-
});
181-
</script>
182-
18354
</body>
18455
</html>

0 commit comments

Comments
 (0)