Merge pull request #71 from miurla/parameters

Improve parameter style

README.md

@@ -3,7 +3,7 @@
 BabyAGI UI is designed to make it easier to run and develop with [babyagi](https://github.com/yoheinakajima/babyagi) in a web app, like a ChatGPT.
 This is a port of [babyagi](https://github.com/yoheinakajima/babyagi) with [Langchain.js](https://github.com/hwchase17/langchainjs) and build a user interface.
 
-![](./public/screenshot-230515.png)
+![](./public/images/screenshot-230525.png)
 [Demo](https://twitter.com/miiura/status/1653026609606320130)
 
 ## 🧰 Stack

src/components/Agent/AgentParameter.tsx

@@ -38,7 +38,7 @@ export const AgentParameter: FC<AgentParameterProps> = ({
 
   return (
     <div className="mx-auto flex flex-col items-start space-y-3 p-4 pt-12 lg:w-2/3 xl:w-2/4">
-      <div className="z-10 flex w-full items-start justify-center gap-2">
+      <div className="z-20 flex w-full items-start justify-center gap-2">
         <Select
           label={translate('MODEL')}
           item={model}
@@ -57,7 +57,7 @@ export const AgentParameter: FC<AgentParameterProps> = ({
         />
       </div>
       {agent.id === 'babyagi' && (
-        <div className="z-20 flex w-1/2 items-start pr-1 pt-2">
+        <div className="z-10 flex w-1/2 items-start pr-1">
           <Select
             label={translate('ITERATIONS')}
             item={iterations}
@@ -72,7 +72,7 @@ export const AgentParameter: FC<AgentParameterProps> = ({
       )}
       {agent.id !== 'babycatagi' && (
         <div className="flex w-full flex-col">
-          <label className="mb-2 text-left text-xs text-neutral-700 dark:text-neutral-400">
+          <label className="mb-2 text-left text-xs text-neutral-400 dark:text-neutral-500">
             {translate('FIRST_TASK')}
           </label>
           <input

src/components/Agent/Select.tsx

@@ -66,7 +66,7 @@ export const Select: FC<Props> = ({ label, item, items, onChange }) => {
     <div className="relative w-full">
       <div className="flex w-full flex-col text-left text-xs">
         <div className="mb-0.5 flex items-center">
-          <label className="text-neutral-600 dark:text-neutral-400">
+          <label className="text-neutral-400 dark:text-neutral-500">
             {label}
           </label>
           {item.message && item.id !== 'babyagi' ? (