From 36da5dd849408d73ea0a91a6f763e761ab13ba86 Mon Sep 17 00:00:00 2001
From: I538344 <charles.dubois@sap.com>
Date: Wed, 5 Aug 2026 16:24:08 +0200
Subject: [PATCH 1/3] feat: [OpenAI] Improve realtime UI

---
 .../sdk/app/controllers/OpenAiController.java |  10 +-
 .../src/main/resources/static/index.html      | 235 ++++++++++++------
 .../src/main/resources/static/pcm-audio.js    |  25 ++
 .../resources/static/show-realtime-diagram.js |  20 --
 .../main/resources/static/speech-to-speech.js | 169 ++++---------
 .../main/resources/static/text-to-speech.js   | 111 +++------
 6 files changed, 267 insertions(+), 303 deletions(-)
 create mode 100644 sample-code/spring-app/src/main/resources/static/pcm-audio.js
 delete mode 100644 sample-code/spring-app/src/main/resources/static/show-realtime-diagram.js

diff --git a/sample-code/spring-app/src/main/java/com/sap/ai/sdk/app/controllers/OpenAiController.java b/sample-code/spring-app/src/main/java/com/sap/ai/sdk/app/controllers/OpenAiController.java
index 9d15231e5..04eba5a70 100644
--- a/sample-code/spring-app/src/main/java/com/sap/ai/sdk/app/controllers/OpenAiController.java
+++ b/sample-code/spring-app/src/main/java/com/sap/ai/sdk/app/controllers/OpenAiController.java
@@ -40,7 +40,7 @@ public class OpenAiController {
   private static final ObjectMapper MAPPER =
       new ObjectMapper().setVisibility(PropertyAccessor.FIELD, JsonAutoDetect.Visibility.ANY);
 
-  private Resource sampleQuestionPcm = new ClassPathResource("static/question.pcm");
+  private final Resource sampleQuestionPcm = new ClassPathResource("static/question.pcm");
 
   @GetMapping("/chatCompletion")
   @Nonnull
@@ -53,9 +53,9 @@ Object chatCompletion(
     return response.getContent();
   }
 
-  @GetMapping(value = "/realtime/smokeTestTextToSpeech", produces = "audio/pcm")
+  @GetMapping(value = "/realtime/textToSpeech", produces = "audio/pcm")
   @Nonnull
-  ResponseEntity<byte[]> smokeTestTextToSpeech() throws TimeoutException {
+  ResponseEntity<byte[]> textToSpeech() throws TimeoutException {
     final var respBody = ByteBuffer.allocate(300000);
     final var lock = new AtomicBoolean(false);
     final AudioOutputChannel audioOutput =
@@ -85,9 +85,9 @@ ResponseEntity<byte[]> smokeTestTextToSpeech() throws TimeoutException {
     throw new TimeoutException("Timeout waiting for text to speech");
   }
 
-  @GetMapping(value = "/realtime/smokeTestSpeechToSpeech", produces = "audio/pcm")
+  @GetMapping(value = "/realtime/speechToSpeech", produces = "audio/pcm")
   @Nonnull
-  ResponseEntity<byte[]> smokeTestSpeechToSpeech() throws TimeoutException {
+  ResponseEntity<byte[]> speechToSpeech() throws TimeoutException {
     final var respBody = ByteBuffer.allocate(800000);
     final var lock = new AtomicBoolean(false);
     final AudioOutputChannel audioOutput =
diff --git a/sample-code/spring-app/src/main/resources/static/index.html b/sample-code/spring-app/src/main/resources/static/index.html
index 6c1e668f8..4ccc3a20b 100644
--- a/sample-code/spring-app/src/main/resources/static/index.html
+++ b/sample-code/spring-app/src/main/resources/static/index.html
@@ -7,28 +7,33 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
           rel="stylesheet">
     <style>
-        body { background-color: #f4f6f9; }
+        body {
+            background-color: #f4f6f9;
+        }
+
         .max-width-container {
             max-width: 550px;
         }
+
         .endpoint-card {
             margin-bottom: 15px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
+
         code {
             font-family: Courier, monospace;
             font-size: 95%;
             color: #0d6efd;
-            padding: 0.2em;
-            padding-left: 0.4em;
-            padding-right: 0.4em;
+            padding: 0.2em 0.4em;
             background-color: #EBEBEB;
             border-radius: 3px;
         }
+
         .info-tooltip {
             position: relative;
             cursor: help;
         }
+
         .info-tooltip .tooltip-content {
             visibility: hidden;
             position: absolute;
@@ -36,7 +41,7 @@
             border: 1px solid #ddd;
             padding: 10px;
             border-radius: 5px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
             width: 250px;
             bottom: 125%;
             right: 15%;
@@ -45,6 +50,7 @@
             opacity: 0;
             transition: opacity 0.3s;
         }
+
         .info-tooltip:hover .tooltip-content {
             visibility: visible;
             opacity: 1;
@@ -61,12 +67,14 @@
             bottom: 0;
             width: 100%;
         }
+
         .footer-links {
             display: flex;
             gap: 15px;
             justify-content: center;
             flex: 1;
         }
+
         .endpoint {
             background: none;
             border: none;
@@ -76,6 +84,7 @@
             cursor: pointer;
             text-align: left;
         }
+
         #content-container pre {
             white-space: pre-wrap;
             word-wrap: break-word;
@@ -83,6 +92,31 @@
             overflow-y: auto;
         }
 
+        .ws-status {
+            font-style: italic;
+            font-size: 0.8em;
+            color: #6c757d;
+        }
+
+        .rt-btn {
+            border: 1px solid #dee2e6;
+            border-radius: 0.375rem;
+            padding: 0.375rem 0.75rem;
+            background: none;
+            color: #0d6efd;
+        }
+
+        #text-to-speech-input {
+            border: 1px solid #dee2e6;
+            border-radius: 0.375rem 0 0 0.375rem;
+            padding: 0.375rem 0.75rem;
+            outline: none;
+        }
+
+        #text-to-speech-send-btn {
+            border-radius: 0 0.375rem 0.375rem 0;
+        }
+
         .modal {
             display: none; /* Hidden by default */
             position: fixed; /* Stay in place */
@@ -93,8 +127,7 @@
             width: 100%; /* Full width */
             height: 100%; /* Full height */
             overflow: auto; /* Enable scroll if needed */
-            background-color: rgb(0,0,0); /* Fallback color */
-            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+            background-color: rgba(0, 0, 0, 0.9);
         }
 
         .modal-content {
@@ -102,34 +135,16 @@
             display: block;
             width: 80%;
             max-width: 700px;
-        }
-
-        #modal-caption {
-            margin: auto;
-            display: block;
-            width: 80%;
-            max-width: 700px;
-            text-align: center;
-            color: #ccc;
-            padding: 10px 0;
-            height: 150px;
-        }
-
-        .modal-content, #modal-caption {
-            -webkit-animation-name: zoom;
-            -webkit-animation-duration: 0.6s;
-            animation-name: zoom;
-            animation-duration: 0.6s;
-        }
-
-        @-webkit-keyframes zoom {
-            from {-webkit-transform:scale(0)}
-            to {-webkit-transform:scale(1)}
+            animation: zoom 0.6s;
         }
 
         @keyframes zoom {
-            from {transform:scale(0)}
-            to {transform:scale(1)}
+            from {
+                transform: scale(0)
+            }
+            to {
+                transform: scale(1)
+            }
         }
 
         .modal-close-button {
@@ -142,14 +157,13 @@
             transition: 0.3s;
         }
 
-        .modal-close-button:hover,
-        .modal-close-button:focus {
+        .modal-close-button:hover, .modal-close-button:focus {
             color: #bbb;
             text-decoration: none;
             cursor: pointer;
         }
 
-        @media only screen and (max-width: 700px){
+        @media only screen and (max-width: 700px) {
             .modal-content {
                 width: 100%;
             }
@@ -346,7 +360,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/reasoning</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Chat request against a reasoning-capable model. Returns both the final answer and its reasoning.
+                                            Chat request against a reasoning-capable model. Returns
+                                            both the final answer and its reasoning.
                                         </div>
                                     </div>
                                 </li>
@@ -370,7 +385,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/multiTurnReasoning</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Two-turn conversation demonstrating re-submission of reasoning_content in messages_history.
+                                            Two-turn conversation demonstrating re-submission of
+                                            reasoning_content in messages_history.
                                         </div>
                                     </div>
                                 </li>
@@ -382,7 +398,9 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/completionWithFallback</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Chat request with a list of LLM modules to call. If the first fails (which will happen here), the next module is called.
+                                            Chat request with a list of LLM modules to call. If the
+                                            first fails (which will happen here), the next module is
+                                            called.
                                         </div>
                                     </div>
                                 </li>
@@ -561,7 +579,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/maskingRegex</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Let the LLM respond with a masked repeated phrase of patient IDs.
+                                            Let the LLM respond with a masked repeated phrase of
+                                            patient IDs.
                                         </div>
                                     </div>
                                 </li>
@@ -676,7 +695,8 @@ <h2>Orchestration</h2>
                         </details>
                         <br>
                         <details>
-                            <summary><h5 style="display:inline-block">Template and Config Reference</h5>
+                            <summary><h5 style="display:inline-block">Template and Config
+                                Reference</h5>
                             </summary>
                             <ul class="list-group">
                                 <li class="list-group-item">
@@ -687,7 +707,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/templateFromPromptRegistryByIdTenant</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Chat request to an LLM through the Orchestration service in tenant scope
+                                            Chat request to an LLM through the Orchestration service
+                                            in tenant scope
                                             using a template from the prompt registry identified by
                                             ID.
                                         </div>
@@ -701,7 +722,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/templateFromPromptRegistryByIdResourceGroup</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Chat request to an LLM through the Orchestration service in resource group
+                                            Chat request to an LLM through the Orchestration service
+                                            in resource group
                                             scope
                                             using a template from the prompt registry identified by
                                             ID.
@@ -716,7 +738,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/templateFromPromptRegistryByScenarioTenant</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Chat request to an LLM through the Orchestration service in tenant scope
+                                            Chat request to an LLM through the Orchestration service
+                                            in tenant scope
                                             using a template from the prompt registry identified by
                                             Scenario, name, and version.
                                         </div>
@@ -730,7 +753,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/templateFromPromptRegistryByScenarioResourceGroup</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Chat request to an LLM through the Orchestration service in resource group
+                                            Chat request to an LLM through the Orchestration service
+                                            in resource group
                                             scope
                                             using a template from the prompt registry identified by
                                             Scenario, name, and version.
@@ -758,7 +782,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/configFromRegistry</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Chat request to an LLM using an Orchestration config stored in prompt registry.
+                                            Chat request to an LLM using an Orchestration config
+                                            stored in prompt registry.
                                         </div>
                                     </div>
                                 </li>
@@ -797,7 +822,8 @@ <h2>Orchestration</h2>
                                             <code>/orchestration/embedding</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Get the embedding of a text after masking using the Orchestration
+                                            Get the embedding of a text after masking using the
+                                            Orchestration
                                             service.
                                         </div>
                                     </div>
@@ -851,12 +877,14 @@ <h5 class="mb-1">OpenAI</h5>
                                 </li>
                                 <li class="list-group-item">
                                     <div class="info-tooltip">
-                                        <button type="submit" formaction="/streamChatCompletionDeltas"
+                                        <button type="submit"
+                                                formaction="/streamChatCompletionDeltas"
                                                 class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint">
                                             <code>/streamChatCompletionDeltas</code>
                                         </button>
                                         <div class="tooltip-content">
-                                            Asynchronous stream of an OpenAI chat request and provision
+                                            Asynchronous stream of an OpenAI chat request and
+                                            provision
                                             of complete
                                             response.
                                         </div>
@@ -864,7 +892,8 @@ <h5 class="mb-1">OpenAI</h5>
                                 </li>
                                 <li class="list-group-item">
                                     <div class="info-tooltip">
-                                        <button type="submit" formaction="/chatCompletionToolExecution"
+                                        <button type="submit"
+                                                formaction="/chatCompletionToolExecution"
                                                 class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint">
                                             <code>/chatCompletionToolExecution</code>
                                         </button>
@@ -963,7 +992,8 @@ <h5 class="mb-1">OpenAI</h5>
                                 </li>
                                 <li class="list-group-item">
                                     <div class="info-tooltip">
-                                        <button type="submit" formaction="/responses/retrieve/[responseId]"
+                                        <button type="submit"
+                                                formaction="/responses/retrieve/[responseId]"
                                                 class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint">
                                             <code>/responses/retrieve/[responseId]</code>
                                         </button>
@@ -974,7 +1004,8 @@ <h5 class="mb-1">OpenAI</h5>
                                 </li>
                                 <li class="list-group-item">
                                     <div class="info-tooltip">
-                                        <button type="submit" formaction="/responses/[responseId]/cancel"
+                                        <button type="submit"
+                                                formaction="/responses/[responseId]/cancel"
                                                 class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint">
                                             <code>/responses/cancel/[responseId]</code>
                                         </button>
@@ -985,7 +1016,8 @@ <h5 class="mb-1">OpenAI</h5>
                                 </li>
                                 <li class="list-group-item">
                                     <div class="info-tooltip">
-                                        <button type="submit" formaction="/responses/delete/[responseId]"
+                                        <button type="submit"
+                                                formaction="/responses/delete/[responseId]"
                                                 class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint">
                                             <code>/responses/delete/[responseId]</code>
                                         </button>
@@ -1057,7 +1089,8 @@ <h5 class="mb-1">Orchestration Integration</h5>
                                         <code>/spring-ai-orchestration/embed/string</code>
                                     </button>
                                     <div class="tooltip-content">
-                                        Embedding request to an embedding model through the Orchestration service
+                                        Embedding request to an embedding model through the
+                                        Orchestration service
                                         with a simple prompt.
                                     </div>
                                 </div>
@@ -1164,8 +1197,10 @@ <h5 class="mb-1">Orchestration Integration</h5>
                                         <code>/spring-ai-orchestration/mcp</code>
                                     </button>
                                     <div class="tooltip-content">
-                                        Use an MCP file system server as tool to answer questions about the SDK itself.
-                                        ⚠️ Only works if the server is started with the "mcp" Spring profile ⚠️.
+                                        Use an MCP file system server as tool to answer questions
+                                        about the SDK itself.
+                                        ⚠️ Only works if the server is started with the "mcp" Spring
+                                        profile ⚠️.
                                     </div>
                                 </div>
                             </li>
@@ -1254,7 +1289,8 @@ <h5 class="mb-1">OpenAI</h5>
                                         <code>/spring-ai-openai/toolCalling</code>
                                     </button>
                                     <div class="tooltip-content">
-                                        Register a function that will be called when the user asks for the weather using
+                                        Register a function that will be called when the user asks
+                                        for the weather using
                                         OpenAI.
                                     </div>
                                 </div>
@@ -1296,7 +1332,8 @@ <h2>Document Grounding</h2>
                         <ul class="list-group">
                             <li class="list-group-item">
                                 <div class="info-tooltip">
-                                    <input type="hidden" name="resource-group" value="ai-sdk-js-e2e">
+                                    <input type="hidden" name="resource-group"
+                                           value="ai-sdk-js-e2e">
                                     <button type="submit" formaction="/grounding/pipelines/list"
                                             class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint">
                                         <code>/grounding/pipelines/list</code>
@@ -1439,7 +1476,8 @@ <h2>📚 Prompt Registry</h2>
                                         <code>/prompt-registry/promptRegistryToSpringAi</code>
                                     </button>
                                     <div class="tooltip-content">
-                                        Get a SpringAI list of messages from a Prompt Registry Response.
+                                        Get a SpringAI list of messages from a Prompt Registry
+                                        Response.
                                     </div>
                                 </div>
                             </li>
@@ -1466,7 +1504,8 @@ <h2>📚 Prompt Registry</h2>
                         <div class="d-flex align-items-center">
                             <h2>📂 Batch API</h2>
                         </div>
-                        Batch API calls together to reduce the number of HTTP connections your client has to make.
+                        Batch API calls together to reduce the number of HTTP connections your
+                        client has to make.
                         For more information, check the <a
                             href="https://github.tools.sap/AI/llm-batch-service"
                             target="_blank">Batch API Documentation</a>
@@ -1562,47 +1601,83 @@ <h2>⏰ Realtime API</h2>
                         </div>
                         Realtime API allows for various real time interactions <a
                             href="https://developers.openai.com/api/docs/guides/realtime"
-                            target="_blank">('Voice agents' and 'speech generation' scenarios are currently supported)</a>
+                            target="_blank">('Voice agents' and 'speech generation' scenarios are
+                        currently supported)</a>
                         <br>
                         In these examples, web socket sessions are created and used
                         to send text/audio to the local server and receive audio back
                         <br>
-                        <button id="show-arch-scheme-btn" type="button" disabled>Show architecture diagram</button>
+                        <br>
+                        <button type="button"
+                                class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint"
+                                onclick="document.getElementById('show-realtime-scheme').style.display='block';document.getElementById('realtime-scheme').src='realtime-api-scheme.svg'">
+                            <code>architecture diagram</code>
+                        </button>
                         <div id="show-realtime-scheme" class="modal">
-                            <span class="modal-close-button">&times;</span>
-                            <img class="modal-content" id="realtime-scheme">
-                            <div id="modal-caption"></div>
+                            <span class="modal-close-button"
+                                  onclick="this.parentElement.style.display='none'">&times;</span>
+                            <img class="modal-content" id="realtime-scheme"
+                                 alt="Realtime API architecture">
                         </div>
-                        <script src="show-realtime-diagram.js"></script>
                     </div>
                     <div class="card-body">
                         <ul class="list-group">
                             <li class="list-group-item">
                                 <div class="info-tooltip">
-                                    <h4><span>Text to speech (<a href="/realtime/smokeTestTextToSpeech" target="_blank">smoke-test</a>)</span></h4>
-                                    <span id="text-to-speech-status">disabled</span>
-                                    <div class="input-group">
-                                        <label for="text-to-speech-input"></label>
-                                        <input type="text" id="text-to-speech-input" placeholder="enter text" disabled>
-                                        <button id="text-to-speech-send-btn" type="button" disabled>Send</button>
+                                    <button type="submit" formaction="/realtime/textToSpeech"
+                                            class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint">
+                                        <code>/realtime/textToSpeech</code>
+                                    </button>
+                                    <div class="tooltip-content">
+                                        Send text to the Realtime API and receive a PCM audio file
+                                        back.
                                     </div>
+                                </div>
+                            </li>
+                        </ul>
+                        <ul class="list-group">
+                            <li class="list-group-item">
+                                <div class="info-tooltip">
+                                    <button type="submit" formaction="/realtime/speechToSpeech"
+                                            class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover endpoint">
+                                        <code>/realtime/speechToSpeech</code>
+                                    </button>
                                     <div class="tooltip-content">
-                                        Translate input text into output sound (speech).
+                                        Send audio to the Realtime API and receive a PCM audio file
+                                        back.
                                     </div>
                                 </div>
-                                <script src="text-to-speech.js"></script>
                             </li>
+                        </ul>
+                        <ul class="list-group">
                             <li class="list-group-item">
                                 <div class="info-tooltip">
-                                    <h4><span>Speech to speech (<a href="/realtime/smokeTestSpeechToSpeech" target="_blank">smoke-test</a>)</span></h4>
-                                    <div><span id="speech-to-speech-websocket-status">socket: disconnected</span></div>
-                                    <div><span id="speech-to-speech-mic-status">microphone: disabled</span></div>
+                                    <h5>Text to speech</h5>
+                                    <span id="text-to-speech-status"
+                                          class="ws-status">disabled</span>
                                     <div class="input-group">
-                                        <button id="speech-to-speech-btn" type="button">Start</button>
+                                        <label for="text-to-speech-input" class="visually-hidden">Text
+                                            to speak</label>
+                                        <input type="text" id="text-to-speech-input"
+                                               placeholder="enter text">
+                                        <div class="tooltip-content">Translate input text into
+                                            output sound (speech).
+                                        </div>
                                     </div>
-                                    <div class="tooltip-content">
-                                        Speak with an AI assistant.
+                                    <script src="pcm-audio.js"></script>
+                                    <script src="text-to-speech.js"></script>
+                            </li>
+                            <li class="list-group-item">
+                                <div class="info-tooltip">
+                                    <h5>Speech to speech</h5>
+                                    <span id="speech-to-speech-websocket-status" class="ws-status">socket: disconnected</span><br>
+                                    <span id="speech-to-speech-mic-status" class="ws-status">microphone: disabled</span>
+                                    <div class="input-group">
+                                        <button id="speech-to-speech-btn" class="rt-btn"
+                                                type="button">Start
+                                        </button>
                                     </div>
+                                    <div class="tooltip-content">Speak with an AI assistant.</div>
                                 </div>
                                 <script src="speech-to-speech.js"></script>
                             </li>
diff --git a/sample-code/spring-app/src/main/resources/static/pcm-audio.js b/sample-code/spring-app/src/main/resources/static/pcm-audio.js
new file mode 100644
index 000000000..fa31e2a5b
--- /dev/null
+++ b/sample-code/spring-app/src/main/resources/static/pcm-audio.js
@@ -0,0 +1,25 @@
+const PCM_SAMPLE_RATE = 24000;
+
+function createAudioContext() {
+    return new AudioContext({sampleRate: PCM_SAMPLE_RATE});
+}
+
+function setStatus(element, text, active) {
+    element.textContent = text;
+    element.style.color = active ? '#198754' : '#6c757d';
+}
+
+function playPcmAudio(audioContext, arrayBuffer, state) {
+    if (!audioContext) return;
+    const intData = new Int16Array(arrayBuffer);
+    const floatData = new Float32Array(intData.length);
+    for (let i = 0; i < intData.length; i++) floatData[i] = intData[i] / 32768;
+    const buffer = audioContext.createBuffer(1, floatData.length, PCM_SAMPLE_RATE);
+    buffer.copyToChannel(floatData, 0);
+    const source = audioContext.createBufferSource();
+    source.buffer = buffer;
+    source.connect(audioContext.destination);
+    if (state.nextStartTime < audioContext.currentTime) state.nextStartTime = audioContext.currentTime;
+    source.start(state.nextStartTime);
+    state.nextStartTime += buffer.duration;
+}
diff --git a/sample-code/spring-app/src/main/resources/static/show-realtime-diagram.js b/sample-code/spring-app/src/main/resources/static/show-realtime-diagram.js
deleted file mode 100644
index 65eaa11b3..000000000
--- a/sample-code/spring-app/src/main/resources/static/show-realtime-diagram.js
+++ /dev/null
@@ -1,20 +0,0 @@
-var modal = document.getElementById("show-realtime-scheme");
-
-// Get the image and insert it inside the modal - use its "alt" text as a caption
-var btn = document.getElementById("show-arch-scheme-btn");
-var modalImg = document.getElementById("realtime-scheme");
-var captionText = document.getElementById("modal-caption");
-btn.onclick = function(){
-    modal.style.display = "block";
-    modalImg.src = "realtime-api-scheme.svg";
-    captionText.innerHTML = "Principal interactions scheme";
-}
-btn.disabled = false;
-
-// Get the <span> element that closes the modal
-var span = document.getElementsByClassName("modal-close-button")[0];
-
-// When the user clicks on <span> (x), close the modal
-span.onclick = function() {
-    modal.style.display = "none";
-}
\ No newline at end of file
diff --git a/sample-code/spring-app/src/main/resources/static/speech-to-speech.js b/sample-code/spring-app/src/main/resources/static/speech-to-speech.js
index ff25001e0..c0d9848ff 100644
--- a/sample-code/spring-app/src/main/resources/static/speech-to-speech.js
+++ b/sample-code/spring-app/src/main/resources/static/speech-to-speech.js
@@ -1,128 +1,53 @@
-const SPEECH_TO_SPEECH_URL = 'ws://localhost:8080/speech-to-speech';
-const SPEECH_TO_SPEECH_SAMPLE_RATE = 24000;
-
-const wsStatusEl = document.getElementById('speech-to-speech-websocket-status')
-const micStatusEl = document.getElementById('speech-to-speech-mic-status')
-const speechBtn = document.getElementById('speech-to-speech-btn')
-
-let sts_ws = null;
-let sts_audioCtx = null;
-let sts_mediaStream = null;
-let sts_workletNode = null;
-let sts_nextStartTime = 0;
-let sts_started = false;
-
-async function startSession() {
-    sts_ws = new WebSocket(SPEECH_TO_SPEECH_URL);
-    sts_ws.binaryType = 'arraybuffer';
-
-    sts_ws.onopen = async () => {
-        wsStatusEl.textContent = `socket: connected to ${SPEECH_TO_SPEECH_URL}`;
-        wsStatusEl.style.color = 'green';
-
-        await startMicrophone();
-        speechBtn.innerText = 'Stop';
-        sts_started = true;
-    }
-
-    sts_ws.onmessage = (event) => {
-        if (event.data instanceof ArrayBuffer) {
-            sts_playPcmAudio(event.data)
+const speechWebSocketStatus = document.getElementById('speech-to-speech-websocket-status');
+const speechMicrophoneStatus = document.getElementById('speech-to-speech-mic-status');
+const speechButton = document.getElementById('speech-to-speech-btn');
+let speechWebSocket, speechAudioContext, speechMediaStream, speechWorkletNode,
+    speechStarted = false, speechState = {nextStartTime: 0};
+
+const WORKLET_CODE = `class P extends AudioWorkletProcessor{process(inputs){const channel=inputs[0]?.[0];if(channel){const buffer=new Int16Array(channel.length);for(let i=0;i<channel.length;i++){const sample=Math.max(-1,Math.min(1,channel[i]));buffer[i]=sample<0?sample*0x8000:sample*0x7FFF}this.port.postMessage(buffer.buffer,[buffer.buffer])}return true}}registerProcessor('mic-processor',P)`;
+
+async function startSpeechSession() {
+    speechWebSocket = new WebSocket('ws://localhost:8080/speech-to-speech');
+    speechWebSocket.binaryType = 'arraybuffer';
+    speechWebSocket.onopen = async () => {
+        setStatus(speechWebSocketStatus, 'socket: connected', true);
+        try {
+            speechMediaStream = await navigator.mediaDevices.getUserMedia({audio: true});
+            setStatus(speechMicrophoneStatus, 'microphone: active', true);
+            speechAudioContext = createAudioContext();
+            const workletUrl = URL.createObjectURL(new Blob([WORKLET_CODE], {type: 'application/javascript'}));
+            await speechAudioContext.audioWorklet.addModule(workletUrl);
+            URL.revokeObjectURL(workletUrl);
+            speechWorkletNode = new AudioWorkletNode(speechAudioContext, 'mic-processor');
+            speechWorkletNode.port.onmessage = (event) => {
+                if (speechWebSocket?.readyState === WebSocket.OPEN) speechWebSocket.send(event.data);
+            };
+            speechAudioContext.createMediaStreamSource(speechMediaStream).connect(speechWorkletNode);
+        } catch (error) {
+            console.error('Microphone error:', error);
+            setStatus(speechMicrophoneStatus, 'mic error', false);
         }
-    }
-
-    sts_ws.onclose = () => stopSession();
-}
-
-async function startMicrophone() {
-    try {
-        sts_mediaStream = await navigator.mediaDevices.getUserMedia({audio: true});
-        console.log("mediaStream is: ", sts_mediaStream)
-        micStatusEl.textContent = 'microphone: active';
-        micStatusEl.style.color = 'green';
-
-        sts_audioCtx = new (window.AudioContext || window.webkitAudioContext)({sampleRate: SPEECH_TO_SPEECH_SAMPLE_RATE});
-
-        const workletCode = `
-            class MicProcessor extends AudioWorkletProcessor {
-                process(inputs) {
-                    const input = inputs[0];
-                    if (input && input[0]) {
-                        const float32Input = input[0];
-                        const int16Buffer = new Int16Array(float32Input.length);
-                        for (let i = 0; i < float32Input.length; i++) {
-                            const s = Math.max(-1, Math.min(1, float32Input[i]));
-                            int16Buffer[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
-                        }
-                        this.port.postMessage(int16Buffer.buffer, [int16Buffer.buffer]);
-                    }
-                    return true;
-                }
-            }
-            registerProcessor('mic-processor', MicProcessor);
-        `;
-        const blob = new Blob([workletCode], {type: 'application/javascript'});
-        const workletUrl = URL.createObjectURL(blob);
-        await sts_audioCtx.audioWorklet.addModule(workletUrl);
-        URL.revokeObjectURL(workletUrl);
-
-        const source = sts_audioCtx.createMediaStreamSource(sts_mediaStream);
-        sts_workletNode = new AudioWorkletNode(sts_audioCtx, 'mic-processor');
-        sts_workletNode.port.onmessage = (e) => {
-            if (sts_ws && sts_ws.readyState === WebSocket.OPEN) {
-                sts_ws.send(e.data);
-            }
-        };
-
-        source.connect(sts_workletNode);
-
-    } catch (err) {
-        console.error('failed to find or bind microphone: ', err);
-        micStatusEl.innerText = 'mic binding error';
-        micStatusEl.style.color = 'red';
-    }
+        speechButton.textContent = 'Stop';
+        speechStarted = true;
+    };
+    speechWebSocket.onmessage = (event) => {
+        if (event.data instanceof ArrayBuffer) playPcmAudio(speechAudioContext, event.data, speechState);
+    };
+    speechWebSocket.onclose = () => stopSpeechSession();
 }
 
-function sts_playPcmAudio(arrayBuffer) {
-    if (!sts_audioCtx) return;
-
-    const int16Data = new Int16Array(arrayBuffer);
-    const float32Data = new Float32Array(int16Data.length);
-    for (let i = 0; i < int16Data.length; i++) {
-        float32Data[i] = int16Data[i] / 32768.0;
+function stopSpeechSession() {
+    speechWebSocket?.close();
+    speechMediaStream?.getTracks().forEach(track => track.stop());
+    speechWorkletNode?.disconnect();
+    if (speechAudioContext) {
+        speechAudioContext.close();
+        speechAudioContext = null;
     }
-
-    const audioBuffer = sts_audioCtx.createBuffer(1, float32Data.length, SPEECH_TO_SPEECH_SAMPLE_RATE);
-    audioBuffer.copyToChannel(float32Data, 0);
-    const source = sts_audioCtx.createBufferSource();
-    source.buffer = audioBuffer;
-    source.connect(sts_audioCtx.destination);
-
-    if (sts_nextStartTime < sts_audioCtx.currentTime) {
-        sts_nextStartTime = sts_audioCtx.currentTime;
-    }
-
-    source.start(sts_nextStartTime);
-    sts_nextStartTime += audioBuffer.duration;
-}
-
-function stopSession() {
-    if (sts_ws) sts_ws.close();
-    if (sts_mediaStream) sts_mediaStream.getTracks().forEach(track => track.stop());
-    if (sts_workletNode) sts_workletNode.disconnect();
-    if (sts_audioCtx) {
-        sts_audioCtx.close();
-        sts_audioCtx = null;
-    }
-
-    wsStatusEl.textContent = 'socket: disconnected';
-    wsStatusEl.style.color = 'red';
-    micStatusEl.textContent = 'microphone: disabled';
-    micStatusEl.style.color = 'red';
-    speechBtn.innerText = 'Start';
-    sts_started = false;
+    setStatus(speechWebSocketStatus, 'socket: disconnected', false);
+    setStatus(speechMicrophoneStatus, 'microphone: disabled', false);
+    speechButton.textContent = 'Start';
+    speechStarted = false;
 }
 
-speechBtn.addEventListener('click', () => {
-    sts_started ? stopSession() : startSession();
-})
\ No newline at end of file
+speechButton.onclick = () => speechStarted ? stopSpeechSession() : startSpeechSession();
diff --git a/sample-code/spring-app/src/main/resources/static/text-to-speech.js b/sample-code/spring-app/src/main/resources/static/text-to-speech.js
index 80bd75841..96a4b1b64 100644
--- a/sample-code/spring-app/src/main/resources/static/text-to-speech.js
+++ b/sample-code/spring-app/src/main/resources/static/text-to-speech.js
@@ -1,77 +1,36 @@
-const WS_URL = 'ws://localhost:8080/text-to-speech';
-const SAMPLE_RATE = 24000;
-
-const statusEl = document.getElementById('text-to-speech-status')
-const textInput = document.getElementById('text-to-speech-input')
-const sendBtn = document.getElementById('text-to-speech-send-btn')
-
-let audioCtx;
-let nextStartTime = 0;
-
-let ws = new WebSocket(WS_URL);
-ws.binaryType = 'arraybuffer';
-
-ws.onopen = () => {
-    statusEl.textContent = `connected to ${WS_URL}`;
-    statusEl.style.color = 'green';
-    textInput.disabled = false;
-    sendBtn.disabled = false;
-};
-
-ws.onclose = () => {
-    statusEl.textContent = 'disconnected';
-    statusEl.style.color = 'red';
-    textInput.disabled = true;
-    sendBtn.disabled = true;
-}
-
-ws.onerror = (error) => {
-    console.error('text-to-speech WebSocket error:', error);
-    statusEl.textContent = 'connection error'
-    statusEl.style.color = 'red';
-}
-
-ws.onmessage = (event) => {
-    if (event.data instanceof ArrayBuffer) {
-        playPcmAudio(event.data);
-    } else {
-        console.log('text data received:', event.data)
+const textToSpeechStatusElement = document.getElementById('text-to-speech-status');
+const textToSpeechInput = document.getElementById('text-to-speech-input');
+const textToSpeechSendButton = document.getElementById('text-to-speech-send-btn');
+let textToSpeechAudioContext, textToSpeechWebSocket, textToSpeechState = {nextStartTime: 0};
+
+setStatus(textToSpeechStatusElement, 'ready', false);
+
+textToSpeechSendButton.onclick = () => {
+    const text = textToSpeechInput.value.trim();
+    if (!text) return;
+    const data = new TextEncoder().encode(text);
+    if (textToSpeechWebSocket?.readyState === WebSocket.OPEN) {
+        textToSpeechWebSocket.send(data);
+        textToSpeechInput.value = '';
+        return;
     }
-}
-
-sendBtn.addEventListener('click', () => {
-    const text = textInput.value.trim();
-    if (text && ws.readyState === WebSocket.OPEN) {
-        if (!audioCtx) {
-            audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE});
-        }
-
-        const encoder = new TextEncoder();
-        const binaryData = encoder.encode(text);
-        ws.send(binaryData);
-        textInput.value = '';
-    }
-})
-
-function playPcmAudio(arrayBuffer) {
-    if (!audioCtx) return;
-
-    const int16Data = new Int16Array(arrayBuffer);
-    const float32Data = new Float32Array(int16Data.length);
-    for (let i = 0; i < int16Data.length; i++) {
-        float32Data[i] = int16Data[i] / 32768.0;
-    }
-
-    const audioBuffer = audioCtx.createBuffer(1, float32Data.length, SAMPLE_RATE);
-    audioBuffer.copyToChannel(float32Data, 0);
-    const source = audioCtx.createBufferSource();
-    source.buffer = audioBuffer;
-    source.connect(audioCtx.destination);
-
-    if (nextStartTime < audioCtx.currentTime) {
-        nextStartTime = audioCtx.currentTime;
-    }
-
-    source.start(nextStartTime);
-    nextStartTime += audioBuffer.duration;
-}
\ No newline at end of file
+    textToSpeechWebSocket = new WebSocket('ws://localhost:8080/text-to-speech');
+    textToSpeechWebSocket.binaryType = 'arraybuffer';
+    textToSpeechWebSocket.onopen = () => {
+        setStatus(textToSpeechStatusElement, 'connected', true);
+        textToSpeechAudioContext ??= createAudioContext();
+        textToSpeechWebSocket.send(data);
+        textToSpeechInput.value = '';
+    };
+    textToSpeechWebSocket.onclose = () => {
+        setStatus(textToSpeechStatusElement, 'ready', false);
+        textToSpeechWebSocket = null;
+    };
+    textToSpeechWebSocket.onerror = () => {
+        setStatus(textToSpeechStatusElement, 'error', false);
+        textToSpeechWebSocket = null;
+    };
+    textToSpeechWebSocket.onmessage = (event) => {
+        if (event.data instanceof ArrayBuffer) playPcmAudio(textToSpeechAudioContext, event.data, textToSpeechState);
+    };
+};

From b1f3275ef8d676a6ec9e7be4d2ce61c16cf9eb97 Mon Sep 17 00:00:00 2001
From: I538344 <charles.dubois@sap.com>
Date: Wed, 5 Aug 2026 16:27:11 +0200
Subject: [PATCH 2/3] f

---
 sample-code/spring-app/src/main/resources/static/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/sample-code/spring-app/src/main/resources/static/index.html b/sample-code/spring-app/src/main/resources/static/index.html
index 4ccc3a20b..3ae71e7ef 100644
--- a/sample-code/spring-app/src/main/resources/static/index.html
+++ b/sample-code/spring-app/src/main/resources/static/index.html
@@ -1601,11 +1601,11 @@ <h2>⏰ Realtime API</h2>
                         </div>
                         Realtime API allows for various real time interactions <a
                             href="https://developers.openai.com/api/docs/guides/realtime"
-                            target="_blank">('Voice agents' and 'speech generation' scenarios are
-                        currently supported)</a>
+                            target="_blank">Voice agents and speech generation scenarios are
+                        currently supported</a>.
                         <br>
                         In these examples, web socket sessions are created and used
-                        to send text/audio to the local server and receive audio back
+                        to send text/audio to the local server and receive audio back.
                         <br>
                         <br>
                         <button type="button"

From 98a7dc0d13f003536026c97ad398fd5353c0aea0 Mon Sep 17 00:00:00 2001
From: I538344 <charles.dubois@sap.com>
Date: Wed, 5 Aug 2026 16:29:03 +0200
Subject: [PATCH 3/3] f

---
 .../src/main/resources/static/index.html           | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/sample-code/spring-app/src/main/resources/static/index.html b/sample-code/spring-app/src/main/resources/static/index.html
index 3ae71e7ef..e1e45b008 100644
--- a/sample-code/spring-app/src/main/resources/static/index.html
+++ b/sample-code/spring-app/src/main/resources/static/index.html
@@ -1660,12 +1660,16 @@ <h5>Text to speech</h5>
                                             to speak</label>
                                         <input type="text" id="text-to-speech-input"
                                                placeholder="enter text">
-                                        <div class="tooltip-content">Translate input text into
-                                            output sound (speech).
-                                        </div>
+                                        <button id="text-to-speech-send-btn" class="rt-btn"
+                                                type="button">Send
+                                        </button>
                                     </div>
-                                    <script src="pcm-audio.js"></script>
-                                    <script src="text-to-speech.js"></script>
+                                    <div class="tooltip-content">Translate input text into output
+                                        sound (speech).
+                                    </div>
+                                </div>
+                                <script src="pcm-audio.js"></script>
+                                <script src="text-to-speech.js"></script>
                             </li>
                             <li class="list-group-item">
                                 <div class="info-tooltip">