feat: add cover photo in blog

grayhatdevelopers · Jan 31, 2024 · f464541 · f464541
1 parent b8a1ff8
commit f464541
Show file tree

Hide file tree

Showing 18 changed files with 165 additions and 35 deletions.
diff --git a/_meta.tsx b/_meta.tsx
@@ -29,7 +29,7 @@ export default {
         "title": <SidebarTitleComponent>For users</SidebarTitleComponent>
     },
     'guide': {
-        title: 'Guides for integrations',
+        title: 'Guides for Integrations',
     },
     'creative-tools': {
         title: 'Creative suite',
@@ -48,7 +48,7 @@ export default {
     // },
     'upload-content': {
         title: 'Send us your content ↗',
-        "href": "https://getomni.app/api",
+        "href": "https://docs.google.com/forms/d/1begM4VfB0s5kWDUXLhwviJXF8QoRekW8fafNuv25bJY/viewform?edit_requested=true",
         "newWindow": true
     },
     // 'pricing': {
@@ -58,12 +58,13 @@ export default {
         type: 'separator',
         "title": <SidebarTitleComponent>For developers</SidebarTitleComponent>
     },
-    'api-guide': {
-        title: 'API',
-    },
-    'examples': {
-        title: 'Examples',
+    'developers': {
+        title: 'For Developers',
+        display: 'children'
     },
+    // 'examples': {
+    //     title: 'Examples',
+    // },
 
 
     '--': {

diff --git a/blog/_meta.tsx b/blog/_meta.tsx
@@ -1,11 +1,11 @@
 export default {
+    'omni-at-future-fest': {
+        title: `Omni at Future Fest`
+    },
     'automatons-and-ai-for-javascript-junkies': {
         title: 'Automatons and AI for JavaScript Junkies',
     },
     'sign-in-with-adobe-in-a-next-js-app': {
         title: 'Sign in with Adobe in a Next.js App',
     },
-    'omni-at-future-fest': {
-        title: `Omni at Future Fest`
-    },
 }
diff --git a/blog/automatons-and-ai-for-javascript-junkies.mdx b/blog/automatons-and-ai-for-javascript-junkies.mdx
@@ -4,7 +4,7 @@ import BlogTitle from '../../components/blogTitle'
     title={'Automatons and AI for JavaScript Junkies'}
     date={'Dec 11, 2023'}
     authorName={'Saad Bazaz'}
-    authorAvatar={undefined}
+    authorAvatar={'/docs/images/saad-bazaz.jpeg'}
 />
 
 <div 

diff --git a/blog/omni-at-future-fest.mdx b/blog/omni-at-future-fest.mdx
@@ -1,10 +1,11 @@
 import BlogTitle from '../../components/blogTitle'
 
 <BlogTitle
+    coverImg={'/docs/images/3d-omni.png'}
     title={`Omni at Future Fest`}
     date={'Jan 24, 2024'}
     authorName={'Zohair Abbas Hadi'}
-    authorAvatar={undefined}
+    authorAvatar={'/docs/images/zohair-hadi.jpeg'}
 />
 
 <div 

diff --git a/blog/sign-in-with-adobe-in-a-next-js-app.mdx b/blog/sign-in-with-adobe-in-a-next-js-app.mdx
@@ -4,7 +4,7 @@ import BlogTitle from '../../components/blogTitle'
     title={'Sign in with Adobe in a Next.js App'}
     date={'Oct 20, 2023'}
     authorName={'Saad Bazaz'}
-    authorAvatar={undefined}
+    authorAvatar={'/docs/images/saad-bazaz.jpeg'}
 />
 
 <div 

diff --git a/commercial/use-cases.mdx b/commercial/use-cases.mdx
@@ -1,6 +1,12 @@
+import Image from 'next/image'
+
+<Image src={"/docs/images/3d-omni-logo.png"} width={1000} height={1000} style={{position: 'absolute', width: "100%", top: 0, left: 0, opacity:0.2, zIndex: -1, mixBlendMode: 'exclusion', filter: 'blur(1rem)'}} autoPlay muted loop />
+
 # AI on the big screen
 
-We want to bring Omni and similar AI tech to the big screen. After trying out our consumer level technology, you may be interested in large-scale use cases.
+We originally founded Omni to accelerate media production to consumer devices, and one day, even the big screen. 
+
+After trying out our [consumer level technology](/guide), you may be interested in more large-scale use cases.
 
 Some examples are:
 
@@ -16,9 +22,7 @@ Not fitting into any of the categories above? We want to hear from you too!
 
 2. **Rapid Turnaround:** Omni's AI-powered technology accelerates the dubbing process, enabling you to meet tight deadlines and release content faster than ever.
 
-3. **Consistent Quality:** Say goodbye to the variability in human performance. Omni maintains a consistent level of quality across all your dubbing projects, ensuring a professional and polished outcome every time.
-
-4. **Adaptability:** Whether you're handling extensive content or require real-time solutions, Omni adapts to your specific needs, offering flexibility unmatched by traditional methods.
+3. **Adaptability:** Whether you're handling extensive content or require real-time solutions, we have models for almost all your specific needs, offering flexibility unmatched by traditional methods.
 
 ### When NOT to Use Omni
 
@@ -30,4 +34,4 @@ While Omni excels in various scenarios, there are instances where it might not b
 
 3. **Small-Scale Productions:** For projects with minimal dubbing requirements or a focus on personalized, handcrafted content, traditional methods may provide a more tailored approach.
 
-At Omni, we value transparency and believe in helping you make informed decisions based on your unique project needs.
+We value transparency and believe in helping you make informed decisions based on your unique project needs.
diff --git a/creative-tools/actor-db.mdx b/creative-tools/actor-db.mdx
@@ -1 +1,5 @@
-# Coming Soon
+import {Callout} from 'nextra/components'
+
+<Callout type='info'>
+    We're currently building this feature.
+</Callout>
diff --git a/creative-tools/dub.mdx b/creative-tools/dub.mdx
@@ -1,6 +1,11 @@
 Our technology offers two primary services:
 
-#### WhatsApp Bot: Our WhatsApp bot effortlessly translates your voice notes into any language you desire. To find out how to use it, refer to the "WhatsApp Bot" section of our documentation.
-#### Discord Bot: Our Discord bot provides similar translation services on the Discord platform. To find out how to use it, refer to the "Discord Bot" section of our documentation.
+#### WhatsApp Bot:
+
+Our WhatsApp bot effortlessly translates your voice notes into any language you desire. To find out how to use it, refer to the "WhatsApp Bot" section of our documentation.
+
+#### Discord Bot: 
+
+Our Discord bot provides similar translation services on the Discord platform. To find out how to use it, refer to the "Discord Bot" section of our documentation.
 
 >For commercial work or collaborations, please fill out this [form](https://docs.google.com/forms/d/1begM4VfB0s5kWDUXLhwviJXF8QoRekW8fafNuv25bJY/viewform?edit_requested=true). We look forward to working with you!
diff --git a/creative-tools/lip-sync.mdx b/creative-tools/lip-sync.mdx
@@ -1 +1,5 @@
-# Coming Soon
+import {Callout} from 'nextra/components'
+
+<Callout type='info'>
+    We're currently building this feature.
+</Callout>
diff --git a/creative-tools/sub.mdx b/creative-tools/sub.mdx
@@ -1 +1,5 @@
-# Coming Soon
+import {Callout} from 'nextra/components'
+
+<Callout type='info'>
+    We're currently building this feature.
+</Callout>
diff --git a/creative-tools/voice.mdx b/creative-tools/voice.mdx
@@ -1 +1,5 @@
-# Coming Soon
+import {Callout} from 'nextra/components'
+
+<Callout type='info'>
+    We're currently building this feature.
+</Callout>
diff --git a/api-guide.mdx → developers/api.mdx b/api-guide.mdx → developers/api.mdx
@@ -22,11 +22,11 @@ We're building SDKs in Node and Python to enable developers to whip up scripts,
 
 When invoking our API, you may choose a model according to your use case. The details are below:
 
-| Name   | Speed | Quality | Supported features
-| :----- | :----: | :----: |----: |
-| `babelfish-micro`    |  Fastest   |  Low | Audio only |
-| `babelfish` | Fast  |  Medium |   Audio, video |
-| `solomon` | Slow  |  High |   Audio, video |
+| Name   | Speed | Quality | Supported features | Voice cloning | Prosody transfer | Background noise preservation | LipSync 
+| :----- | :----: | :----: | :----: | :----: | :----: | :----: | :----: |
+| `babelfish-micro`    |  Fastest   |  Low | Audio only | ✅ | ✅ | | | 
+| `babelfish` | Fast  |  Medium |   Audio, video | ✅ | ✅ | ✅ | | 
+| `solomon` | Slow  |  High |   Audio, video | ✅ | ✅ | ✅ | ✅ | 
 
 ## All languages
 

diff --git a/developers/examples.mdx b/developers/examples.mdx
@@ -0,0 +1,73 @@
+import {Callout} from 'nextra/components'
+
+# Examples of API Usage
+
+We've built some common use cases for both copy-pasting, and to help developers.
+
+See the [API Reference](https://getomni.app/api) to see the API endpoints.
+
+<Callout>
+Would you like to add an example? Open a [Pull Request](https://github.com/grayhatdevelopers/omni-docs/blob/main/developers/examples.mdx) on this page.
+</Callout>
+
+## Different models, different use cases.
+
+You can create scripts which use models conditionally. In the following NodeJS example, we use `babelfish-micro` for audios, and `babelfish` for video.
+
+```typescript copy showLineNumbers filename="dub_script.js"
+const axios = require('axios');
+const readline = require('readline');
+const fs = require('fs');
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+function promptUser() {
+  rl.question('Enter the path of the file: ', async (filePath) => {
+    try {
+      const fileBuffer = fs.readFileSync(filePath);
+
+      const isAudioFile = isAudio(filePath);
+      const model = isAudioFile ? 'babelfish-micro' : 'babelfish';
+      const preserveBackground = !isAudioFile;
+      const preservePace = !isAudioFile;
+
+      const response = await sendRequest(fileBuffer, model, preserveBackground, preservePace);
+
+      console.log('Response:', response.data);
+    } catch (error) {
+      console.error('Error:', error.message);
+    } finally {
+      rl.close();
+    }
+  });
+}
+
+function isAudio(filePath) {
+  const audioExtensions = ['.mp3', '.wav', '.ogg', '.aac', '.flac'];
+  const fileExtension = filePath.toLowerCase().slice(filePath.lastIndexOf('.'));
+  return audioExtensions.includes(fileExtension);
+}
+
+async function sendRequest(fileBuffer, model, preserveBackground, preservePace) {
+  const apiUrl = 'https://getomni.app/api/dub';
+
+  const formData = new FormData();
+  formData.append('file', fileBuffer, { filename: 'audio_or_video_file' });
+  formData.append('modelName', model);
+  formData.append('preserveBackground', preserveBackground);
+  formData.append('preservePace', preservePace);
+
+  const response = await axios.post(apiUrl, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response;
+}
+
+promptUser();
+```
diff --git a/guide/integrations/discord.mdx b/guide/integrations/discord.mdx
@@ -1 +1,5 @@
-# Coming Soon
+import {Callout} from 'nextra/components'
+
+<Callout type='info'>
+    We're currently building this feature.
+</Callout>
diff --git a/guide/integrations/telegram.mdx b/guide/integrations/telegram.mdx
@@ -1 +1,5 @@
-# Coming Soon
+import {Callout} from 'nextra/components'
+
+<Callout type='info'>
+    We're currently building this feature.
+</Callout>
diff --git a/guide/integrations/wechat.mdx b/guide/integrations/wechat.mdx
@@ -1 +1,5 @@
-# Coming Soon
+import {Callout} from 'nextra/components'
+
+<Callout type='info'>
+    We're currently building this feature.
+</Callout>
diff --git a/guide/integrations/whatsapp.mdx b/guide/integrations/whatsapp.mdx
@@ -1,7 +1,21 @@
+import ReactPlayer from 'react-player'
+
+
 # WhatsApp Bot Docs
 
+
+<div style={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: '1.5rem'
+}}>
+<ReactPlayer url='https://www.youtube.com/watch?v=d74lL7PRxcU' autoPlay muted={true} controls={false}/>
+</div>
+
 ## Omni WhatsApp Bot: User Guide
-Hello! Welcome to Omni, your friendly translation bot on WhatsApp! With Omni, you can effortlessly translate your voice notes into any language you desire. Follow the simple steps below to start dubbing your voice notes.
+
+With OmniDub, you can effortlessly translate your voice notes into any language you desire. Follow the simple steps below to start dubbing your voice notes.
 <br/>
 <div
     style={{
@@ -101,8 +115,8 @@ After that, you will be navigated to the WhatsApp application and a new chat wil
     fontWeight: 'bold'
  }}
 >Note:</span>
-- The current supported languages include [List of supported languages].
--  Omni will notify you when the translation is ready for playback.
+- See the [list of supported languages](http://localhost:3002/docs/guide/integrations/supported-languages).
+- OmniDub will notify you when the translation is ready for playback.
 - Feel free to experiment with different languages for diverse translation experiences!
 </div>
 

diff --git a/index.css b/index.css
@@ -4,6 +4,10 @@
     font-family: 'Quicksand', sans-serif;
 }
 
+.nextra-code * {
+    font-family: 'Courier New', Courier, monospace !important;
+}
+
 @media screen and (prefers-color-scheme: light) {
     .omni-logo {
         -webkit-text-stroke: #fff !important;