Reuse whisper code examples on main page

Author: yatarkan

site/src/components/image-generation.tsx

@@ -19,7 +19,7 @@ export const ImageGeneration = () => {
   return (
     <Section.Container>
       <Section.Column>
-        <Section.Title>Image generation API</Section.Title>
+        <Section.Title>Image Generation API</Section.Title>
         <Section.Description>
           A user-friendly image generation API can be used with generative models to improve
           creative tools and increase productivity. For instance, it can be utilized in furniture

site/src/components/image-processing.tsx

@@ -18,7 +18,7 @@ export const ImageProcessing = () => {
   return (
     <Section.Container>
       <Section.Column>
-        <Section.Title>Image processing with Visual Language Models</Section.Title>
+        <Section.Title>Image Processing with Visual Language Models</Section.Title>
         <Section.Description>
           An easy-to-use API for vision language models can power chatbots, AI assistants like
           medical helpers, and AI tools like legal contract creators.

site/src/components/speech-to-text.tsx site/src/components/speech-processing.tsxsite/src/components/speech-to-text.tsx renamed to site/src/components/speech-processing.tsx

@@ -2,58 +2,23 @@ import { ExploreCodeSamples } from '@site/src/components/GoToLink/explore-code-s
 import { GoToDocumentation } from '@site/src/components/GoToLink/go-to-documentation';
 import { LanguageTabs, TabItemCpp, TabItemPython } from '@site/src/components/LanguageTabs';
 import { Section } from '@site/src/components/Section';
-import CodeBlock from '@theme/CodeBlock';
 
 import ImagePlaceholder from '@site/static/img/image-generation-placeholder.webp';
 
+import CodeExampleCpp from '@site/docs/use-cases/speech-processing/_sections/_run_model/_code_example_cpp.mdx';
+import CodeExamplePython from '@site/docs/use-cases/speech-processing/_sections/_run_model/_code_example_python.mdx';
+
 const FEATURES = [
   'Translate transcription to English',
   'Predict timestamps',
   'Process Long-Form (>30 seconds) audio',
 ];
 
-const pythonCodeBlock = (
-  <CodeBlock language="python">
-    {`import openvino_genai
-import librosa
-
-def read_wav(filepath):
-    raw_speech, samplerate = librosa.load(filepath, sr=16000)
-    return raw_speech.tolist()
-
-device = "CPU" # GPU can be used as well
-pipe = openvino_genai.WhisperPipeline("whisper-base", device)
-raw_speech = read_wav("sample.wav")
-print(pipe.generate(raw_speech))`}
-  </CodeBlock>
-);
-
-const cppCodeBlock = (
-  <CodeBlock language="cpp">
-    {`#include <iostream>
-
-#include "audio_utils.hpp"
-#include "openvino/genai/whisper_pipeline.hpp"
-
-int main(int argc, char* argv[]) {
-    std::filesystem::path models_path = argv[1];
-    std::string wav_file_path = argv[2];
-    std::string device = "CPU"; // GPU can be used as well
-
-    ov::genai::WhisperPipeline pipeline(models_path, device);
-
-    ov::genai::RawSpeechInput raw_speech = utils::audio::read_wav(wav_file_path);
-
-    std::cout << pipeline.generate(raw_speech, ov::genai::max_new_tokens(100)) << '\\n';
-}`}
-  </CodeBlock>
-);
-
-export const SpeechToText = () => {
+export const SpeechProcessing = () => {
   return (
     <Section.Container>
       <Section.Column>
-        <Section.Title>Speech to text API</Section.Title>
+        <Section.Title>Speech Processing API</Section.Title>
         <Section.Description>
           An intuitive speech-to-text API can work with models like Whisper to enable use cases such
           as video transcription, enhancing communication tools.
@@ -64,8 +29,12 @@ export const SpeechToText = () => {
         <Section.Features features={FEATURES} />
         <hr />
         <LanguageTabs>
-          <TabItemPython>{pythonCodeBlock}</TabItemPython>
-          <TabItemCpp>{cppCodeBlock}</TabItemCpp>
+          <TabItemPython>
+            <CodeExamplePython />
+          </TabItemPython>
+          <TabItemCpp>
+            <CodeExampleCpp />
+          </TabItemCpp>
         </LanguageTabs>
         <hr />
         <ExploreCodeSamples link="docs/category/samples" />

site/src/components/text-generation.tsx

@@ -21,7 +21,7 @@ export const TextGeneration = () => {
   return (
     <Section.Container>
       <Section.Column>
-        <Section.Title>Text generation API</Section.Title>
+        <Section.Title>Text Generation API</Section.Title>
         <Section.Description>
           An easy-to-use API for text generation can work with an LLM model to create chatbots, AI
           assistants like financial helpers, and AI tools like legal contract creators.

site/src/pages/index.tsx

@@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
 import { ImageGeneration } from '../components/image-generation';
 import { ImageProcessing } from '../components/image-processing';
 import { Installation } from '../components/Installation/installation';
-import { SpeechToText } from '../components/speech-to-text';
+import { SpeechProcessing } from '../components/speech-processing';
 import { TextGeneration } from '../components/text-generation';
 
 import styles from './index.module.css';
@@ -47,7 +47,7 @@ export default function Home(): JSX.Element {
         <Installation />
         <TextGeneration />
         <ImageGeneration />
-        <SpeechToText />
+        <SpeechProcessing />
         <ImageProcessing />
       </div>
     </Layout>