feat: add support for video embed (#157)

* video embed

* remove yarn lock

* fix code format. adds workaround for youtube videos

* review

---------

Co-authored-by: Aliaksei Kryvasheyeu <aliaksei_kryvasheyeu@epam.com>

docs/video demos/demos-for-developers/dial-aws-deployment.md

@@ -1,5 +1,5 @@
 # DIAL AWS Marketplace Deployment
 
-[Watch the video](https://youtu.be/vE6mLwR6IGM)
+https://youtu.be/vE6mLwR6IGM
 
 This video contains step-by-step instructions to deploy DIAL from [AWS Marketplace](https://aws.amazon.com/marketplace/pp/prodview-zx4u372lqvtfi). It is intended as a "test" installation for educational purposes, and lacks many of the enterprise features available from the main GitHub repository.

docs/video demos/demos-for-developers/dial-data-viz.md

@@ -1,5 +1,5 @@
 # DIAL AI DataViz
 
-[Watch the video](https://youtu.be/70wb8qzkLMw)
+https://youtu.be/70wb8qzkLMw
 
 A quick demonstration and code walkthrough of the DataViz application, which is a precursor to StatGPT and dives into the agent orchestration framework and can visualize and analyze financial data.

docs/video demos/demos-for-developers/dial-develop-and-deploy.md

@@ -1,5 +1,5 @@
 # DIAL Deploying DIAL and Developing Your First Application
 
-[Watch the video](https://youtu.be/-mfFXnHeiMc)
+https://youtu.be/-mfFXnHeiMc
 
 This video highlights how to deploy DIAL locally from GitHub and write your first application. This example leverages EPAM's AI Gateway; you will need to create your own API keys and gateways for it to work locally.

docs/video demos/demos-for-developers/dial-guided-conversation.md

@@ -1,5 +1,5 @@
 # DIAL Guided Conversation
 
-[Watch the video](https://youtu.be/1XT4NDh1xnc)
+https://youtu.be/1XT4NDh1xnc
 
 The Guided Conversation is an example of an interactive survey; a guided conversation application built on the AI DIAL framework.

docs/video demos/demos-for-developers/dial-rag-eval.md

@@ -1,6 +1,6 @@
 # DIAL RAG Evaluation Toolkit
 
-[Watch the video](https://youtu.be/HYg_L2dxu6U)
+https://youtu.be/HYg_L2dxu6U
 
 The RAG evaluation toolkit consists of three distinct tools: our DIAL Log Parser,  our RAG evaluation library, and our RAG evaluation UI. It is used to validate the quality of the retrieval of any RAG-based application.
 

docs/video demos/demos/dial-chathub.md

@@ -1,5 +1,5 @@
 # DIAL ChatHub
 
-[Watch the video](https://youtu.be/IG0HawQuU-w)
+https://youtu.be/IG0HawQuU-w
 
 DIAL ChatHub is an example of a flow orchestrator that combines several applications and models into one unified access point. ChatHub can automatically route prompts to one of several agents: text-to-text applications, text-to-image applications, vision-to-text applications, DIAL RAG, or DIAL Web RAG. It is just an example of how you can provide a unified access point to several different applications or models within your ecosystem.

docs/video demos/demos/dial-collaboration.md

@@ -1,5 +1,5 @@
 # DIAL Collaboration
 
-[Watch the video](https://youtu.be/ywmzhAuFMaI)
+https://youtu.be/ywmzhAuFMaI
 
 There are three distinct features in DIAL related to collaboration within your organization: Share, Export and Publish. Each has its pros and cons, and this video highlights the main similarities and differences within the three. Export creates files that allows you to create moment-in-time snapshots of conversations to share across environments. Share creates a reference to an existing conversation that you can send to colleagues that will update as you continue the conversation. Publications allow you to create a prompt or conversation library that is automatically shared with colleagues along the organization structure.

docs/video demos/demos/dial-omics-assistant.md

@@ -1,5 +1,5 @@
 # Omics AI Assistant
 
-[Watch the video](https://youtu.be/5Q2XUwx5hYw)
+https://youtu.be/5Q2XUwx5hYw
 
 The Omics AI Assistant is an example of our Talk To Your Data framework being applied to the Life Sciences domain. This application contains 8 distinct agents, such as a mapping agent to map from gene IDs to proteins using the UniProt database, an AlphaFold Visualization agent to predict and visualize protein structures using the AlphaFold algorithm, and an Analytics agent that can analyze custom data about proteins or gene information and answer questions about it.

docs/video demos/demos/dial-parameterized-replay.md

@@ -1,5 +1,5 @@
 # DIAL Parameterized Replay
 
-[Watch the video](https://youtu.be/I8en0n0TQQU)
+https://youtu.be/I8en0n0TQQU
 
 Parameterized Replay combines parameterized prompts with replay functionality to allow users to go through entire conversational flows with selected variables replaced. By combining clever prompt engineering with DIAL’s collaborative capabilities, people can now share even the most complex conversational workflows with their organization with the help of parameterized replays.

docs/video demos/demos/dial-product-overview.md

@@ -1,5 +1,5 @@
 # DIAL Product Overview
 
-[Watch the video](https://youtu.be/2DlK5iMJLFk)
+https://youtu.be/2DlK5iMJLFk
 
 DIAL is our AI ecosystem for streamlining and orchestrating Software Development Lifecycle (SDLC) for enterprise Gen AI applications. Secure, scalable and customizable enterprise-grade AI ecosystem that seamlessly integrates with your data and workflows, tailored to achieve your unique business objectives.

docs/video demos/demos/dial-rag.md

@@ -1,5 +1,5 @@
 # DIAL RAG
 
-[Watch the video](https://youtu.be/0fCWr4MB5KU)
+https://youtu.be/0fCWr4MB5KU
 
 Dial RAG is our implementation of Retrieval Augmented Generation. The Dial RAG answers user questions using information from the documents provided by user. It supports the following document formats: PDF, DOC/DOCX, PPT/PPTX, TXT and other plain text formats such as code files. Internally, Dial RAG uses the unstructured library to parse the documents. It then employs a combination of semantic search using the bge-small-en embeddings model and a keyword search using the Okapi BM25 ranking algorithm to retrieve relevant parts of the document and pass them to the GPT-4 model to synthesize the answer. Initial processing of a new document may take a significant amount of time because the Dial RAG needs to parse the document and build the search indexes. The application stores pre-computed document indexes in the Dial File storage and reuses these indexes for future requests.

docs/video demos/demos/dial-roles-and-rate-limits.md

@@ -1,5 +1,5 @@
 # DIAL Roles and Rate Limits
 
-[Watch the video](https://youtu.be/VWpn7M0bXaQ)
+https://youtu.be/VWpn7M0bXaQ
 
 AI DIAL allows you to define roles and rate limits to restrict access to certain models or applications based on your organizational structure. This allows you to control costs and ensure data and applications are protected within your organization. Access Control applies both on the Chat UI level and through programmatic access via the API.

docs/video demos/demos/dial-statgpt.md

@@ -1,6 +1,5 @@
 # StatGPT
 
-
-[Watch the video](https://youtu.be/C7Eq8IihRL4)
+https://youtu.be/C7Eq8IihRL4
 
 StatGPT is an SDMX-driven platform for statistical organizations allowing to query, transform, analyze, visualize, and interpret statistical data using natural language interface via a proprietary Talk-to-your-data framework powered by AI DIAL.

docs/video demos/demos/dial-ui-basics.md

@@ -1,5 +1,5 @@
 # AI DIAL UI 
 
-[Watch the video](https://youtu.be/W5fpFW7XDn4)
+https://youtu.be/W5fpFW7XDn4
 
 Out of the box, AI DIAL's UI allows you to utilize features like parameterized prompts, import/export conversations, replay conversations with different models, compare different models and simultaneously ask them questions, and playback conversations for demos.

docs/video demos/demos/dial-web-rag.md

@@ -1,5 +1,5 @@
 # DIAL WEB RAG
 
-[Watch the video](https://youtu.be/eYrrCegf-SI)
+https://youtu.be/eYrrCegf-SI
 
 Dial Web RAG combines Cloud Search APIs with DIAL RAG to allow users to search the web and their own documents. It is an example of a stand-alone DIAL application that leverages another application -- in this case, DIAL RAG. Web RAG retrieves the most relevant results from Cloud Search APIs and runs them through DIAL RAG to pass the LLM additional context for summarization.

docusaurus.config.js

@@ -4,54 +4,71 @@
 // There are various equivalent ways to declare your Docusaurus config.
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
-import { themes as prismThemes } from "prism-react-renderer";
+import { themes as prismThemes } from 'prism-react-renderer';
+import fauxRemarkEmbedder from '@remark-embedder/core';
+import fauxOembedTransformer from '@remark-embedder/transformer-oembed';
+
+const transformer = {
+  ...fauxOembedTransformer,
+  getHTML: async (url, getConfig = {}) => {
+    let html = await fauxOembedTransformer.getHTML(url, getConfig);
+    if (html?.startsWith('<iframe')) {
+      html = html.replace('width="200"', 'class="iframe-video"');
+      html = html.replace('height="113"', '');
+    }
+    return html;
+  },
+};
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "DIAL Knowledge Base",
-  favicon: "img/favicon.svg",
+  title: 'DIAL Knowledge Base',
+  favicon: 'img/favicon.svg',
 
   // Set the production url of your site here
-  url: "https://docs.epam-rail.com",
+  url: 'https://docs.epam-rail.com',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/",
+  baseUrl: '/',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: "epam", // Usually your GitHub org/user name.
-  projectName: "ai-dial", // Usually your repo name.
-  deploymentBranch: "gh-pages",
+  organizationName: 'epam', // Usually your GitHub org/user name.
+  projectName: 'ai-dial', // Usually your repo name.
+  deploymentBranch: 'gh-pages',
 
-  onBrokenLinks: "throw", //'throw', for exceptions
-  onBrokenMarkdownLinks: "warn",
+  onBrokenLinks: 'throw', //'throw', for exceptions
+  onBrokenMarkdownLinks: 'warn',
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
+    defaultLocale: 'en',
+    locales: ['en'],
   },
   plugins: [
-    "docusaurus-plugin-image-zoom", // can also just be 'image-zoom'
+    'docusaurus-plugin-image-zoom', // can also just be 'image-zoom'
   ],
   presets: [
     [
-      "classic",
+      'classic',
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          routeBasePath: "/",
-          sidebarPath: "./sidebars.js",
+          routeBasePath: '/',
+          sidebarPath: './sidebars.js',
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           //editUrl:
           //  'https://github.com/epam/ai-dial/tree/main/',
+          remarkPlugins: [
+            [fauxRemarkEmbedder, { transformers: [transformer] }],
+          ],
         },
         blog: false,
         theme: {
-          customCss: "./src/css/custom.css",
+          customCss: './src/css/custom.css',
         },
         sitemap: {
           changefreq: 'weekly',
@@ -64,32 +81,35 @@ const config = {
     ],
   ],
 
-  scripts: [
-    {
-      src: "https://cookie-cdn.cookiepro.com/consent/3a34bbfa-93e4-4ba6-9383-7da88d67ed18/OtAutoBlock.js",
-      type: "text/javascript",
-    },
-    {
-      src: "https://cookie-cdn.cookiepro.com/scripttemplates/otSDKStub.js",
-      type: "text/javascript",
-      charset: "UTF-8",
-      "data-domain-script": "3a34bbfa-93e4-4ba6-9383-7da88d67ed18",
-    },
-    {
-      src: "src/scripts/optanonWrapper.js",
-      type: "text/javascript",
-    },
-  ],
+  scripts:
+    process.env.NODE_ENV === 'development'
+      ? []
+      : [
+          {
+            src: 'https://cookie-cdn.cookiepro.com/consent/3a34bbfa-93e4-4ba6-9383-7da88d67ed18/OtAutoBlock.js',
+            type: 'text/javascript',
+          },
+          {
+            src: 'https://cookie-cdn.cookiepro.com/scripttemplates/otSDKStub.js',
+            type: 'text/javascript',
+            charset: 'UTF-8',
+            'data-domain-script': '3a34bbfa-93e4-4ba6-9383-7da88d67ed18',
+          },
+          {
+            src: 'src/scripts/optanonWrapper.js',
+            type: 'text/javascript',
+          },
+        ],
 
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       navbar: {
-        title: "", // 'EPAM DIAL',
+        title: '', // 'EPAM DIAL',
         logo: {
-          alt: "EPAM DIAL",
-          src: "img/dialx-logo.svg",
-          srcDark: "img/dialx-logo.svg",
+          alt: 'EPAM DIAL',
+          src: 'img/dialx-logo.svg',
+          srcDark: 'img/dialx-logo.svg',
         },
         items: [
           // {
@@ -99,41 +119,42 @@ const config = {
           //   label: 'Tutorial',
           // },
           {
-            href: "https://github.com/search?q=org%3Aepam++DIAL&type=repositories",
-            label: "GitHub",
-            position: "right",
+            href: 'https://github.com/search?q=org%3Aepam++DIAL&type=repositories',
+            label: 'GitHub',
+            position: 'right',
           },
           {
-            href: "https://discord.gg/hgqEAbEwZ9",
-            label: "Discord",
-            position: "right",
+            href: 'https://discord.gg/hgqEAbEwZ9',
+            label: 'Discord',
+            position: 'right',
           },
           {
-            href: "https://www.youtube.com/@TeamDialX",
-            label: "YouTube",
-            position: "right",
-          },
+            href: 'https://www.youtube.com/@TeamDialX',
+            label: 'YouTube',
+            position: 'right',
+          }
         ],
       },
       footer: {
         copyright: `Copyright © ${new Date().getFullYear()} EPAM Systems, Inc. All Rights Reserved`,
       },
+
       prism: {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,
       },
       colorMode: {
-        defaultMode: "dark",
+        defaultMode: 'dark',
       },
       tableOfContents: {
         minHeadingLevel: 2,
         maxHeadingLevel: 4,
       },
       zoom: {
-        selector: ".markdown img",
+        selector: '.markdown img',
         background: {
-          light: "rgb(255, 255, 255)",
-          dark: "rgb(50, 50, 50)",
+          light: 'rgb(255, 255, 255)',
+          dark: 'rgb(50, 50, 50)',
         },
         config: {
           scrollOffset: 1100,
@@ -149,7 +170,18 @@ const config = {
           // facets: [ "language" ]
         },
       },
-      metadata: [{name: 'description', content: 'AI DIAL knowledge base portal.'}, {name: 'keywords', content: 'AI DIAL, RAG, GenAI, AI platform, EPAM DIAL'}, {name: 'summary', content: 'AI DIAL is a secure, enterprise-grade and open-source platform. It has an API-first, cloud and model-agnostic design that makes it suitable for a wide variety of use cases. '},],
+      metadata: [
+        { name: 'description', content: 'AI DIAL knowledge base portal.' },
+        {
+          name: 'keywords',
+          content: 'AI DIAL, RAG, GenAI, AI platform, EPAM DIAL',
+        },
+        {
+          name: 'summary',
+          content:
+            'AI DIAL is a secure, enterprise-grade and open-source platform. It has an API-first, cloud and model-agnostic design that makes it suitable for a wide variety of use cases. ',
+        },
+      ],
     }),
 };