Choose API

SoraWebui · Feb 27, 2024 · 3fbfd8a · 3fbfd8a
1 parent e895b51
commit 3fbfd8a
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 4 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -15,7 +15,9 @@
     "prompt": "Prompt",
     "soraWorksTitle": "Works",
     "soraResultTitle": "Result",
-    "moreExample": "more example video"
+    "moreExample": "more example video",
+    "fakeSoraTip": "FakeSora is designed to simulate the yet-to-be-released OpenAI Sora API.",
+    "soraTip": "OpenAI has not released Sora's API yet."
   },
   "auth": {
     "loginText": "Log in",

diff --git a/messages/ja.json b/messages/ja.json
@@ -15,7 +15,9 @@
     "prompt": "プロンプト",
     "soraWorksTitle": "作品",
     "soraResultTitle": "生成結果",
-    "moreExample": "その他の動画"
+    "moreExample": "その他の動画",
+    "fakeSoraTip": "FakeSora は、まだリリースされていない OpenAI Sora API をシミュレートするように設計されています。",
+    "soraTip": "OpenAIはSoraのAPIをまだリリースしていません。"
   },
   "autoh": {
     "loginText": "ログイン",

diff --git a/messages/ko.json b/messages/ko.json
@@ -15,7 +15,9 @@
     "prompt": "프롬프트",
     "soraWorksTitle": "작품",
     "soraResultTitle": "결과",
-    "moreExample": "더 많은 예제 비디오"
+    "moreExample": "더 많은 예제 비디오",
+    "fakeSoraTip": "FakeSora 는 아직 출시되지 않은 OpenAI Sora API를 시뮬레이션하도록 설계되었습니다.",
+    "soraTip": "OpenAI는 아직 Sora의 API를 출시하지 않았습니다."
   },
   "auth": {
     "loginText": "로그인",

diff --git a/messages/zh.json b/messages/zh.json
@@ -15,7 +15,9 @@
     "prompt": "提示词",
     "soraWorksTitle": "作品列表",
     "soraResultTitle": "结果",
-    "moreExample": "更多示例视频"
+    "moreExample": "更多示例视频",
+    "fakeSoraTip": "FakeSora 旨在模拟尚未发布的 OpenAI Sora API。",
+    "soraTip": "OpenAI 尚未发布 Sora 的 API。"
   },
   "auth": {
     "loginText": "登录",

diff --git a/src/app/[locale]/PageComponent.tsx b/src/app/[locale]/PageComponent.tsx
@@ -23,6 +23,7 @@ const PageComponent = ({
 
   const handleSubmit = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
+    setChooseAPI('FakeSora');
     if (!textStr) {
       setVideoList(randomVideo(2));
       return;
@@ -65,6 +66,8 @@ const PageComponent = ({
     event.target.pause();
   };
 
+  const [chooseAPI, setChooseAPI] = useState('FakeSora');
+
   return (
     <>
       <HeadInfo
@@ -114,6 +117,33 @@ const PageComponent = ({
                       maxLength={1000}
                     />
                   </div>
+                  <div className="flex justify-center items-center space-x-3 px-2 py-2 bg-white text-black">
+                    <span
+                      className={`cursor-pointer p-2 rounded-lg mx-0.5 flex items-center mt-1 border ${chooseAPI == 'FakeSora' ? 'border-[#ffa11b]' : 'border-gray-200'}`}
+                      onClick={() => setChooseAPI('FakeSora')}
+                    >
+                      <span>FakeSora</span>
+                    </span>
+                    <span
+                      className={`cursor-pointer p-2 rounded-lg mx-0.5 flex items-center mt-1 border ${chooseAPI == 'Sora' ? 'border-[#ffa11b]' : 'border-gray-200'}`}
+                      onClick={() => setChooseAPI('Sora')}
+                    >
+                      <span>Sora</span>
+                    </span>
+                  </div>
+                  {
+                    chooseAPI == 'FakeSora' ?
+                      <div className="flex justify-center items-center space-x-3 px-2 bg-white text-red-400">
+                        {indexLanguageText.fakeSoraTip}
+                      </div>
+                      :
+                      chooseAPI == 'Sora' ?
+                        <div className="flex justify-center items-center space-x-3 px-2 bg-white text-red-400">
+                          {indexLanguageText.soraTip}
+                        </div>
+                        :
+                        null
+                  }
                   <div className="inset-x-px bottom-1 bg-white">
                     <div
                       className="flex justify-center items-center space-x-3 border-t border-gray-200 px-2 py-2">

diff --git a/src/app/[locale]/playground/PageComponent.tsx b/src/app/[locale]/playground/PageComponent.tsx
@@ -22,6 +22,7 @@ const PageComponent = ({
 
   const handleSubmit = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
+    setChooseAPI('FakeSora');
     if (!textStr) {
       return;
     }
@@ -65,6 +66,8 @@ const PageComponent = ({
     }
   }, intervalLocalStorage);
 
+  const [chooseAPI, setChooseAPI] = useState('FakeSora');
+
   return (
     <>
       <HeadInfo
@@ -109,6 +112,33 @@ const PageComponent = ({
                       maxLength={1000}
                     />
                   </div>
+                  <div className="flex justify-center items-center space-x-3 px-2 py-2 bg-white text-black">
+                    <span
+                      className={`cursor-pointer p-2 rounded-lg mx-0.5 flex items-center mt-1 border ${chooseAPI == 'FakeSora' ? 'border-[#ffa11b]' : 'border-gray-200'}`}
+                      onClick={() => setChooseAPI('FakeSora')}
+                    >
+                      <span>FakeSora</span>
+                    </span>
+                    <span
+                      className={`cursor-pointer p-2 rounded-lg mx-0.5 flex items-center mt-1 border ${chooseAPI == 'Sora' ? 'border-[#ffa11b]' : 'border-gray-200'}`}
+                      onClick={() => setChooseAPI('Sora')}
+                    >
+                      <span>Sora</span>
+                    </span>
+                  </div>
+                  {
+                    chooseAPI == 'FakeSora' ?
+                      <div className="flex justify-center items-center space-x-3 px-2 bg-white text-red-400">
+                        {indexLanguageText.fakeSoraTip}
+                      </div>
+                      :
+                      chooseAPI == 'Sora' ?
+                        <div className="flex justify-center items-center space-x-3 px-2 bg-white text-red-400">
+                          {indexLanguageText.soraTip}
+                        </div>
+                        :
+                        null
+                  }
                   <div className="inset-x-px bottom-1 bg-white">
                     <div
                       className="flex justify-center items-center space-x-3 border-t border-gray-200 px-2 py-2">

diff --git a/src/configs/languageText.ts b/src/configs/languageText.ts
@@ -15,6 +15,8 @@ export const getIndexLanguageText = async () => {
     prompt: tIndex('prompt'),
     moreExample: tIndex('moreExample'),
     soraResultTitle: tIndex('soraResultTitle'),
+    fakeSoraTip: tIndex('fakeSoraTip'),
+    soraTip: tIndex('soraTip'),
   };
 }