Added a warning banner in AI generation (#553)

Leo-Corporation · Sep 9, 2023 · 6371645 · 6371645
1 parent 6ea4993
commit 6371645
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 36 deletions.
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -107,5 +107,6 @@
   "text-hash": "Text to hash",
   "hashing-algo": "Hashing algorithm",
   "default-hashing-algo": "Default hashing algorithm.",
-  "get-api-key-msg": "You can get an OpenAI API Key by going to the OpenAI Platform website at platform.openai.com with an OpenAI account."
+  "get-api-key-msg": "You can get an OpenAI API Key by going to the OpenAI Platform website at platform.openai.com with an OpenAI account.",
+  "ai-disclaimer": "AI technology is still experimental and may produce errors. Use it with human judgment."
 }
diff --git a/locales/fr/common.json b/locales/fr/common.json
@@ -107,5 +107,6 @@
   "text-hash": "Texte à hacher",
   "hashing-algo": "Algorithme de hachage",
   "default-hashing-algo": "Algorithme de hachage par défaut.",
-  "get-api-key-msg": "Vous pouvez obtenir une clé API OpenAI en allant sur le site web de la plateforme OpenAI à platform.openai.com avec un compte OpenAI."
+  "get-api-key-msg": "Vous pouvez obtenir une clé API OpenAI en allant sur le site web de la plateforme OpenAI à platform.openai.com avec un compte OpenAI.",
+  "ai-disclaimer": "La technologie de l'IA est encore expérimentale et peut produire des erreurs. Il convient de l'utiliser avec un jugement humain."
 }
diff --git a/pages/generate.tsx b/pages/generate.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react"
 import Head from "next/head"
 import {
+  Info16Filled,
+  Info24Filled,
   Lightbulb20Regular,
   LightbulbFilament48Regular,
   LockClosed20Regular,
@@ -472,41 +474,50 @@ export default function IndexPage() {
                 </Dialog>
               </div>
             ) : (
-              <div className="flex w-full flex-col items-center">
-                <div className="m-5 flex w-full space-x-2">
-                  <Input
-                    type="text"
-                    id="prompt-txt"
-                    placeholder={t("enter-prompt")}
-                    className="h-auto min-w-[150px] border-0 bg-white px-2 py-1 shadow-md dark:bg-slate-800"
-                  />
-                  <Button
-                    className="h-auto px-2 py-1"
-                    onClick={GeneratePasswordAi}
-                  >
-                    {t("generate")}
-                  </Button>
-                </div>
-                <div
-                  id="suggestions"
-                  className="flex w-full flex-wrap items-center"
-                >
-                  {GetRandomPrompts(3).map((prp) => (
-                    <PromptItem prompt={prp} />
-                  ))}
-                </div>
-                <div
-                  className={resVis ? "hidden" : "flex flex-col items-center"}
-                >
-                  <p className="icon my-2 mr-2 animate-spin select-none text-6xl font-normal">
-                    {"\uF709"}
-                  </p>
-                  <p className="text-center font-bold">{t("ai-loading")}</p>
+              <div>
+                <div className="grid grid-cols-[16px,1fr] items-center space-x-2 rounded-lg border border-blue-600 bg-white p-2 text-blue-600 dark:bg-blue-950 dark:text-white">
+                  <Info16Filled />
+                  <p className="text-sm">{t("ai-disclaimer")}</p>
                 </div>
-                <div id="result-items" className={resVis ? "w-full" : "hidden"}>
-                  {passwords.map((password) => (
-                    <PasswordItem content={password} />
-                  ))}
+                <div className="flex w-full flex-col items-center">
+                  <div className="m-5 flex w-full space-x-2">
+                    <Input
+                      type="text"
+                      id="prompt-txt"
+                      placeholder={t("enter-prompt")}
+                      className="h-auto min-w-[150px] border-0 bg-white px-2 py-1 shadow-md dark:bg-slate-800"
+                    />
+                    <Button
+                      className="h-auto px-2 py-1"
+                      onClick={GeneratePasswordAi}
+                    >
+                      {t("generate")}
+                    </Button>
+                  </div>
+                  <div
+                    id="suggestions"
+                    className="flex w-full flex-wrap items-center"
+                  >
+                    {GetRandomPrompts(3).map((prp) => (
+                      <PromptItem prompt={prp} />
+                    ))}
+                  </div>
+                  <div
+                    className={resVis ? "hidden" : "flex flex-col items-center"}
+                  >
+                    <p className="icon my-2 mr-2 animate-spin select-none text-6xl font-normal">
+                      {"\uF709"}
+                    </p>
+                    <p className="text-center font-bold">{t("ai-loading")}</p>
+                  </div>
+                  <div
+                    id="result-items"
+                    className={resVis ? "w-full" : "hidden"}
+                  >
+                    {passwords.map((password) => (
+                      <PasswordItem content={password} />
+                    ))}
+                  </div>
                 </div>
               </div>
             )}