Merge pull request #1686 from zachlasiuk/main

Template: Whisper demo finalization, added DevProgram signup modal to next steps page

Author: pareenaverma

.github/workflows/deploy.yml

@@ -21,6 +21,10 @@ on:
         required: true
       HUGO_AUDIO_API:
         required: true
+      HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID:
+        required: true
+      HUGO_DEV_PROG_SIGNIUP_FORM_ID:
+        required: true
 
 env:
   HUGO_VERSION: 0.130.0
@@ -69,6 +73,8 @@ jobs:
           HUGO_LLM_API: ${{ secrets.HUGO_LLM_API }}
           HUGO_RAG_API: ${{ secrets.HUGO_RAG_API }}
           HUGO_AUDIO_API: ${{ secrets.HUGO_AUDIO_API }}
+          HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID: ${{ secrets.HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID }}
+          HUGO_DEV_PROG_SIGNIUP_FORM_ID: ${{ secrets.HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID }}
 
       # Deploys website to AWS S3 and invalidate CloudFront Cache
       - name: Deploy to S3

.github/workflows/main.yml

@@ -24,3 +24,5 @@ jobs:
       HUGO_LLM_API: ${{ secrets.HUGO_LLM_API }}
       HUGO_RAG_API: ${{ secrets.HUGO_RAG_API }}
       HUGO_AUDIO_API: ${{ secrets.HUGO_AUDIO_API }}
+      HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID: ${{ secrets.HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID }}
+      HUGO_DEV_PROG_SIGNIUP_FORM_ID: ${{ secrets.HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID }}

.github/workflows/production.yml

@@ -24,3 +24,5 @@ jobs:
       HUGO_LLM_API: ${{ secrets.HUGO_LLM_API }}
       HUGO_RAG_API: ${{ secrets.HUGO_RAG_API }}
       HUGO_AUDIO_API: ${{ secrets.HUGO_AUDIO_API }}
+      HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID: ${{ secrets.HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID }}
+      HUGO_DEV_PROG_SIGNIUP_FORM_ID: ${{ secrets.HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID }}

.gitignore

@@ -6,6 +6,8 @@ node_modules/
 package-lock.json
 .hugo_build.lock
 .vscode
+.env
+startup.sh
 
 # macOS files
 *.DS_Store

content/learning-paths/servers-and-cloud-computing/whisper/_demo.md

@@ -1,14 +1,19 @@
 ---
 title: Demo - Audio transcription on Arm
 overview: | 
-  Insert helpful overview here.
+  This Learning Path shows you how to use a c8g.8xlarge AWS Graviton4 instance powered by an Arm Neoverse CPU to build a simple Transcription-as-a-Service server.
 
+  This architecture is suitable for businesses looking to deploy the latest Generative AI technologies with audio transcription capabilities using their existing CPU compute capacity and deployment pipelines. This demo provides speech recognition using the `whisper-large-v3-turbo model`, deployed using the Hugging Face Transformers framework.
+
+  Record audio from your browser to interact with the Whisper model and send it to be transcribed to see the performance for yourself. Note that no recorded audio is saved on our servers at any point. 
+  
+  After running the demo you can follow the Learning Path to build your own Generative AI service on Arm Neoverse.
 
 
 demo_steps:
-  - Record your voice (giving mic permissions to your browser).
-  - Review and send to _________________insert technical thing here_____________.
-  - Get transcription and view stats.
+  - Record your voice (give microphone permissions to your browser).
+  - Review and send the audio file to the sever for transcription.
+  - Recieve transcribed output and view stats.
 
 
 title_chatbot_area: Whisper Voice Demo
@@ -21,7 +26,8 @@ terms_and_conditions: demo-terms-and-conditions.txt
 
 ### Specific details to this demo
 # ================================================================================
-stats_description: The 'total time' for a whisper voice-to-text process refers to the complete duration taken from the moment the audio input is received until the final text output is generated. This includes several related times such as the 'pre-processing time', which is the time taken to prepare the audio data for transcription, the 'transcription time', which is the actual time spent converting the audio to text, and the 'post-processing time', which involves refining and formatting the transcribed text. Each of these stages contributes to the overall 'total time' and can vary depending on factors such as audio quality, length of the audio, and the efficiency of the transcription algorithm.
+stats_description: |
+  The 'total time' for a whisper voice-to-text process refers to the complete duration taken from the moment the audio input is received until the final text output is generated. This includes several related times such as the 'pre-processing time', which is the time taken to prepare the audio data for transcription, the 'transcription time', which is the actual time spent converting the audio to text, and the 'post-processing time', which involves refining and formatting the transcribed text. Each of these stages contributes to the overall 'total time' and can vary depending on factors such as audio quality, length of the audio, and the efficiency of the transcription algorithm.
 
 ### FIXED, DO NOT MODIFY
 # ================================================================================

content/learning-paths/servers-and-cloud-computing/whisper/demo-terms-and-conditions.txt

@@ -1,4 +1,4 @@
-TERMS OF SERVICE FOR USE OF CHATBOT DEMO
+TERMS OF SERVICE FOR USE OF WHISPER DEMO
 
 PLEASE READ THESE TERMS OF SERVICE CAREFULLY.  
 BY USING THE SERVICE, YOU HEREBY ACKNOWLEDGE AND AGREE THAT YOU HAVE READ, FULLY UNDERSTAND, AND AGREE TO BE BOUND BY THESE TERMS OF SERVICE.  IF YOU ARE ENTERING INTO THESE TERMS OF SERVICE ON BEHALF OF A COMPANY OR OTHER ENTITY, YOU REPRESENT THAT YOU HAVE THE AUTHORITY TO BIND SUCH COMPANY OR OTHER ENTITY TO THESE TERMS OF SERVICE.  

themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-voice-transcriber/demo-stats--llm-voice-transcriber.html

@@ -131,7 +131,7 @@ <h2>Stats</h2>
                         <span id="total-time-metric" style="color: var(--arm-green); font-size: 72px;"></span>
                     </div>
                     <div class="c-row">
-                        <p style="color: var(--arm-green);">seconds to complete transcription.</p>
+                        <p style="color: var(--arm-green);">seconds to complete transcription of audio recorded at <span id="sample-rate-metric"></span>kHz.</p>
                     </div>
                     <br>
                     <p>

themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-voice-transcriber/javascript--llm-voice-transcriber.html

@@ -20,7 +20,7 @@
     var connectionStatus = {
         isActive: false
     };
-
+    var sample_rate = 0;
 
 
 
@@ -30,6 +30,8 @@
         document.getElementById('stats-initial').hidden = true;
         // Update time taken
         document.getElementById('total-time-metric').textContent = time_taken;   
+
+        document.getElementById('sample-rate-metric').textContent = sample_rate;
     }
 
 
@@ -126,6 +128,15 @@
                 mediaRecorder.start();
                 isRecording = true;
 
+                // Create an AudioContext to get the sample rate
+                const audioContext = new AudioContext();
+                sample_rate = audioContext.sampleRate; // update global var
+                sample_rate = 48000;
+                sample_rate = (sample_rate / 1000).toFixed(1).replace(/\.0$/, '');
+
+                console.log('Recording audio at: ', sample_rate, 'kHz');
+
+
 
                 // Cap recording at set time
                 audio_cap_timeout = setTimeout(() => {

themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/next-steps.html

@@ -242,14 +242,167 @@ <h4>Read related resources</h4>
 
 
             <div id="arm-dev-program-div" class="content-box">
+                <!-- 
                 <h4>Talk with Arm Experts</h4>
                 <p>Join the Arm Developer Program to share ideas, ask questions, and explore solutions with the support of the developer community.</p>
+                
                 <ads-cta-button id="join-dev-program" level="primary" sr-label="primary button" class="next-step-cta" name="DevProgram">Join now</ads-cta-button>    
                 <script>
                     document.getElementById("join-dev-program").onclick = function () {
                     window.open("https://www.arm.com/resources/developer-program?#register","_blank");
                     };
                 </script>
+            -->
+
+                <h4>Join Developer Program</h4>
+                <p>Join the Arm Developer Program to share ideas, ask questions, and explore solutions with the support of the developer community.</p>
+                
+                <ads-modal id="modal-custom-trigger">
+                        <div slot="body">
+                            <div id="form-display">
+                                <h2 class="modal-title u-margin-right-1/2" style="margin-top: 0px; margin-bottom: 16px;">Join Arm Developer Program</h2>
+                                <div class="c-row" style="max-width: 650px;">
+                                    <p>By signing up, you will receive member news and email updates on topics that interest you. You can manage your subscription preferences anytime.</p>
+                                </div>
+                                <div class="c-row lg:u-display-block u-hide u-margin-bottom-1 u-margin-right-1/2">
+                                    <img src="/img/arm_dev_program_half.jpg" alt="Developer Program" style="width: 98%; max-width: 650px;  display: block;">
+                                </div>                
+                                <hr class="u-margin-right-1/2">
+                                <div id="marketo-form-container"></div>
+                            </div>
+                            <div id="form-completed" hidden>
+                                <h2 class="modal-title">Program Registration Success</h2>
+                                <p class="success-message">You're almost there! To complete your membership registration, please click 'confirm membership' in the email we have just sent you.</p>
+                                <p class="success-message">Please check your spam folder if you do not see any email in your inbox within 10 minutes.</p>      
+                            </div>
+                        </div>
+                        <div slot="actions" class="u-flex u-flex-direction-column md:u-flex-direction-row u-gap-1" style="justify-content: flex-start;">
+                            <ads-cta-button id="devprog-cta-submit" level="primary" class="devprog-modal-button" type="submit" sr-label="submit">Submit</ads-cta-button>
+                            <ads-cta-button level="secondary" class="devprog-cta-close devprog-modal-button" type="button" sr-label="close">Close</ads-cta-button>
+                        </div>
+                        <div slot="trigger">
+                            <ads-cta-button id="dev-program-show-form" level="primary" class="next-step-cta" name="DevProgram">Join now</ads-cta-button>    
+                        </div>
+                </ads-modal>
+                <script>
+                    (() => {
+                        const modal = document.getElementById('modal-custom-trigger');
+
+                        // Close model button
+                        document.querySelectorAll('.devprog-cta-close').forEach((button) => {
+                            button.addEventListener('click', function() {
+                              modal.close();
+                            });
+                          });
+
+                        
+
+
+// SECTION 5: Marketo Developer Program Form Embed
+const formScript = document.createElement('script');
+formScript.src = '//engaged.arm.com/js/forms2/js/forms2.min.js';
+formScript.onload = function() {
+  MktoForms2.loadForm(
+    '//engaged.arm.com',
+    '{{getenv "HUGO_DEV_PROG_SIGNIUP_FORM_MUNCHKIN_ID"}}',
+    {{getenv "HUGO_DEV_PROG_SIGNIUP_FORM_ID"}},           
+    
+    function(form) {
+      const formContainer = document.getElementById('marketo-form-container');
+      formContainer.appendChild(form.getFormElem()[0]);
+      formContainer.querySelector('form').style.display = 'block';
+
+      // Handle successful form submission
+      form.onSuccess(function() {
+        // Hide 'form-display' and devprog submit button and show 'form-completed'
+        document.getElementById('form-completed').hidden = false;
+        document.getElementById('form-display').hidden = true;
+        document.getElementById('devprog-cta-submit').style.display = 'none';
+        return false;
+      });
+
+      // Form submit handler
+      const registerButton = modal.querySelector('#devprog-cta-submit');
+      registerButton.addEventListener('click', () => {
+        form.submit();
+      });
+
+      // SECTION 6: Apply Form Styles - full css in css reference file
+      const formStyles = document.createElement('style');
+      formStyles.textContent = `
+        /* Marketo Form Style Overrides */
+        
+        /* Hide unnecessary Marketo elements */
+        .mktoPlaceholder,
+        .mktoPlaceholderHtmlText_2024-07-02717_8762,
+        .mktoPlaceholderdataTransferConsent,
+        div[class*="mktoPlaceholder"],
+        .mktoFormRow:has(input[type="hidden"]:only-child),
+        .mktoFormRow:has(.mktoFieldDescriptor:only-child input[type="hidden"]),
+        .mktoFormRow:has(.mktoPlaceholder:only-child),
+        .mktoFormRow:not(:has(select, input[type="text"], input[type="email"])),
+        .mktoFormRow:empty,
+        .mktoButtonRow {
+          display: none !important;
+          height: 0 !important;
+          margin: 0 !important;
+          padding: 0 !important;
+          min-height: 0 !important;
+          opacity: 0 !important;
+          position: absolute !important;
+          pointer-events: none !important;
+        }
+
+        /* Base form layout */
+        .mktoForm {
+          width: 100% !important;
+          font-family: Lato, Helvetica, Arial, sans-serif !important;
+          color: #333e48 !important;
+          margin-bottom: 0 !important;
+        }
+
+        /* Form field styling */
+        .mktoForm input[type="text"],
+        .mktoForm input[type="email"],
+        .mktoForm select {
+          width: 100% !important;
+          height: 40px !important;
+          padding: 0 16px !important;
+          border: 1px solid #ccc !important;
+          border-radius: 4px !important;
+          font-family: Lato, Helvetica, Arial, sans-serif !important;
+          font-size: 16px !important;
+          color: #333e48 !important;
+          box-sizing: border-box !important;
+          background-color: #ffffff !important;
+        }
+
+        /* Label width override */
+        .mktoLabel {
+            
+        }
+        .mktoAsterix {
+            float:left!important;
+            margin-right: 4px!important;
+            
+        }
+        .mktoField {
+            
+        }
+
+
+      `;
+      document.head.appendChild(formStyles);
+    }
+  );
+};
+document.body.appendChild(formScript);
+
+
+
+                    })();
+                </script>
+
             </div>