From 2ef07a9ac6941b96626e1ae71cf06dde2d991745 Mon Sep 17 00:00:00 2001
From: MohammedMaaz <maazkhawar25@gmail.com>
Date: Thu, 7 Dec 2023 03:50:10 +0500
Subject: [PATCH 1/3] feat: file input support in playground and evaluations

---
 agenta-web/public/assets/fallback.png         | Bin 0 -> 2404 bytes
 .../ABTestingEvaluationTable.tsx              |  44 ++++---
 .../AICritiqueEvaluationTable.tsx             |  52 ++++-----
 .../CustomCodeRunEvaluationTable.tsx          |  52 ++++-----
 .../ExactMatchEvaluationTable.tsx             |  53 ++++-----
 .../EvaluationTable/RegexEvaluationTable.tsx  |  52 ++++-----
 .../SimilarityMatchEvaluationTable.tsx        |  52 ++++-----
 .../SingleModelEvaluationTable.tsx            |  43 ++++---
 .../WebhookEvaluationTable.tsx                |  56 +++++----
 .../Evaluations/EvaluationCardView/index.tsx  |  42 ++++---
 .../Playground/ParamsForm/ParamsForm.tsx      | 107 ++++++++++++++++++
 .../components/Playground/Views/TestView.tsx  |  42 +++----
 agenta-web/src/lib/helpers/openapi_parser.ts  |   4 +-
 agenta-web/src/lib/helpers/testset.ts         |   3 +-
 agenta-web/src/lib/helpers/validators.ts      |   6 +-
 examples/vision_gpt_explain_image/.gitignore  |   7 ++
 examples/vision_gpt_explain_image/app.py      |   2 +-
 17 files changed, 367 insertions(+), 250 deletions(-)
 create mode 100644 agenta-web/public/assets/fallback.png
 create mode 100644 agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
 create mode 100644 examples/vision_gpt_explain_image/.gitignore

diff --git a/agenta-web/public/assets/fallback.png b/agenta-web/public/assets/fallback.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3cbad03790c43025419fb22c239616d2ff66d1c
GIT binary patch
literal 2404
zcmeHI>s!)i82<eLl`Io9uhdQmx;!gW)K&;8MdTsV4w^!knVA$xgk=&xj47tm+?u&&
zhI3b%nwz@RQqzR;&{Rxk8I~rMl_FvDd|<Q>`xEwI*FN0$b6?MMzaQTFd9UkD4-TRl
z8Cn_w0ANJhNeR)_79FHWeI3giyRHBLxINC#FPP@%hY9AekH)cL0KhgUn#nYwIoh^G
zMKPIeoep+}oWu~ZI5UJPXlZ_cX~A@0nw#_UA|r>*QN!@PEkMzp2et95GBNX2&TZx6
zpSsGp8&(}~`G&6aB1RPIg%S;ichQ`J^q&YIFQ>bb5|L1d*K6DF>|zI0ZiQGmSV<8y
zz6HbkO4JC-f>M6XhW-#Cw!jBGA(rrUCPiYA=>oB?TU%?m)*gKf)Nn$=lx7c-@TI4F
zqSbKZ6Cc{~?JLB*E|(I=j(~34J*N<<A*Cs?jH-gHlpJ9W2#4GLZdFPe0@7@X%nf|Y
z$(h0jChuI|K15bp+v%sO$TR*NtZZ+to9joat1BzscBkVm(N;*a&OhN=C0f+kcwHzw
z^IWUFA+<1nMzAnnW@xqAnQ0w4!><W4gs+-Cfw6Dt<T~}OYr0&$V!~)g0|Nnjokjv+
zS{#7TDNqMX9RL6(f&J5Ik--1a($B*swq_In4034{pS@>6)eF+;-mo>P36<4ug(>#8
zcIugNxm=oAsl4Zn>Bq`heePa)Pfw4J-o7U`W@hJiyC11a&yIdvm9vG^IgUy$C(Ue8
zD;?T9IO>s+kpr<l5-*|PQufeCbe%OB;X{_7F)8L4GQxr^+05K=8G*0_v0@NLxeOwb
zU`G+O{|*0k4szsThHudD_;~rk{8apMs#EE<q(4g(LqkJ9;a-jxnpnMB`ZU@-p;FY+
z&MYuq4h+11*>J9!Z*ad5$2)!n@+J}k?G<wz@zT=5jB4Ag(Ru>f0~m0=xf??Es&jCI
z0ElG)RrG)x0Q%+-j#{T%_A}r}eV#XnEx$#rudk;MR{h2@0EcjygT)swUYwZwG<qO{
zNFu4dlV|1pg=y6X0x2LHvWSuuG@R9p2ux%*H*GsBZ%m$>oa{y?#)RTbF)d=U5}z9G
zpN}P;n>@0=J>JxcEJClttHU=wU5QI!NN<W=v3=*VU1hk{x$jMM{>C|tl6vn>(;K^f
zE)>Dgb&M7l=RVzTt%?5Ptah2dHZj|=*JgP7y|^)5-gJIuVsdqlG|kwhcAJ_TC!;I+
zE+NFfVw=OuT8p)%Zsf?wRzcax*nZ79l?Pb7qxOe@k?)mC<;3gPKWDH@oW?ejMN@8!
zBx5R-dbMf4g`01(#c2Q76XaEf5b2MLP#f;P;jJnlp6A{9E)UIUy1<`GB$cND=zi%G
zr|fY-zs$224<C#?ycO>s)=!0y@rT!SZ*V%DwJAz4^<iI<JKjH1kmtfLYQexL=AskJ
zyAqO2u`-ilf@b(dgG~kKn^Iq)H`3nUn!Tx8apgH#=R!J1IC&2k8yo-9ks(S(hhJd3
z23^l3zL{^VAf1L$+6Ely>2hib`$84<l#=(Z+@@>k>Iz;>cDQ2t`H1fFUS)UH4Gt2`
zkq@0KUwZNHT}V4NvAV)c{ru^j+W7<@7$pqVM`uU8{*LIo>8WvLWK&jMyrTL8K0`*h
z7_%O>vC>=^jo|bgYDho5xG<wWL=X6-Y60a?z@DGgDD8i&Jc(oO2*c}Z+V78_=tPaa
zJtLD##e8i+OzKH#5+%$IKCqVQaDv<1F=1^4@uJP#T8uCm%Y?3;Q9fAnj`t|((BSQZ
zZzp=g7M3Dv{6ygO%-(CWYc`Jkd9>MT@L<fPR_+*P^CAqb@4orIY2HXNdwu9M{~;8W
zd+;H>2vlVa1s2RKw8K5(z9$7hNVw(4_r1kne0WR;BHuFb?$)dm(Yg@ueLVLV7$uLB
zxL)xHiHeFYQ61|*h%a+v*=(0vtkK6BqO?KlImXL6-cWQuF(E+{-_W^4kGLc_wfOj|
z%ZnOqXtib?M+0p{PbQmK#TJE#q0l1VPLIBP0L}5R{~C!Z46ZgJ=-yBMH@mE06x%+Q
yU*`(c-%bE+NKgd-y{nQnShDE<W8(i<BwA2nE2(2Pdj)*{scGATC>6fUl)nIBe#5l@

literal 0
HcmV?d00001

diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index adc4e7ad37..0b72d622ec 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -34,6 +34,7 @@ import {EvaluationTypeLabels, camelToSnake} from "@/lib/helpers/utils"
 import {testsetRowToChatMessages} from "@/lib/helpers/testset"
 import EvaluationVotePanel from "../Evaluations/EvaluationCardView/EvaluationVotePanel"
 import VariantAlphabet from "../Evaluations/EvaluationCardView/VariantAlphabet"
+import ParamsForm from "../Playground/ParamsForm/ParamsForm"
 
 const {Title} = Typography
 
@@ -76,7 +77,7 @@ const useStyles = createUseStyles({
         "& button": {
             marginLeft: 10,
         },
-        marginTop: 10,
+        marginTop: "0.75rem",
     },
     recordInput: {
         marginBottom: 10,
@@ -336,22 +337,29 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
             dataIndex: "inputs",
             render: (text: any, record: ABTestingEvaluationTableRow, rowIndex: number) => (
                 <div>
-                    {evaluation.testset.testsetChatColumn
-                        ? evaluation.testset.csvdata[rowIndex][
-                              evaluation.testset.testsetChatColumn
-                          ] || " - "
-                        : record &&
-                          record.inputs &&
-                          record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
-                          record.inputs.map((input: any, index: number) => (
-                              <div className={classes.recordInput} key={index}>
-                                  <Input
-                                      placeholder={input.input_name}
-                                      value={input.input_value}
-                                      onChange={(e) => handleInputChange(e, record.id, index)}
-                                  />
-                              </div>
-                          ))}
+                    {evaluation.testset.testsetChatColumn ? (
+                        evaluation.testset.csvdata[rowIndex][
+                            evaluation.testset.testsetChatColumn
+                        ] || " - "
+                    ) : (
+                        <ParamsForm
+                            isChatVariant={false}
+                            onParamChange={(name, value) =>
+                                handleInputChange(
+                                    {target: {value}} as any,
+                                    record.id,
+                                    record?.inputs.findIndex((ip) => ip.input_name === name),
+                                )
+                            }
+                            inputParams={
+                                variantData[0].inputParams?.map((item) => ({
+                                    ...item,
+                                    value: record.inputs.find((ip) => ip.input_name === item.name)
+                                        ?.input_value,
+                                })) || []
+                            }
+                        />
+                    )}
 
                     <div className={classes.inputTestBtn}>
                         <Button
@@ -460,7 +468,6 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                     dataSource={rows}
                     columns={columns}
                     pagination={false}
-                    rowClassName={() => "editable-row"}
                     rowKey={(record) => record.id!}
                 />
             ) : (
@@ -472,6 +479,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                     onInputChange={handleInputChange}
                     updateEvaluationScenarioData={updateEvaluationScenarioData}
                     evaluation={evaluation}
+                    variantData={variantData}
                 />
             )}
         </div>
diff --git a/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
index b6ab986f42..0c46619d43 100644
--- a/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
@@ -32,6 +32,7 @@ import {exportAICritiqueEvaluationData} from "@/lib/helpers/evaluate"
 import SecondaryButton from "../SecondaryButton/SecondaryButton"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import {contentToChatMessageString, testsetRowToChatMessages} from "@/lib/helpers/testset"
+import ParamsForm from "../Playground/ParamsForm/ParamsForm"
 
 const {Title} = Typography
 
@@ -214,13 +215,10 @@ Answer ONLY with one of the given grading or evaluation options.
         }
     }, [evaluationStatus, evaluation.id])
 
-    const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
-        rowIndex: any,
-        inputFieldKey: number,
-    ) => {
+    const handleInputChange = (value: any, name: string, rowIndex: any) => {
         const newRows = [...rows]
-        newRows[rowIndex].inputs[inputFieldKey].input_value = e.target.value
+        const ip = newRows[rowIndex].inputs.find((ip) => ip.input_name === name)
+        if (ip) ip.input_value = value
         setRows(newRows)
     }
 
@@ -374,22 +372,25 @@ Answer ONLY with one of the given grading or evaluation options.
             dataIndex: "inputs",
             render: (text: any, record: AICritiqueEvaluationTableRow, rowIndex: number) => (
                 <div>
-                    {evaluation.testset.testsetChatColumn
-                        ? evaluation.testset.csvdata[rowIndex][
-                              evaluation.testset.testsetChatColumn
-                          ] || " - "
-                        : record &&
-                          record.inputs &&
-                          record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
-                          record.inputs.map((input: any, index: number) => (
-                              <div className={classes.recordInput} key={index}>
-                                  <Input
-                                      placeholder={input.input_name}
-                                      value={input.input_value}
-                                      onChange={(e) => handleInputChange(e, record.id, index)}
-                                  />
-                              </div>
-                          ))}
+                    {evaluation.testset.testsetChatColumn ? (
+                        evaluation.testset.csvdata[rowIndex][
+                            evaluation.testset.testsetChatColumn
+                        ] || " - "
+                    ) : (
+                        <ParamsForm
+                            isChatVariant={false}
+                            onParamChange={(name, value) =>
+                                handleInputChange(value, name, rowIndex)
+                            }
+                            inputParams={
+                                variantData[0].inputParams?.map((item) => ({
+                                    ...item,
+                                    value: record.inputs.find((ip) => ip.input_name === item.name)
+                                        ?.input_value,
+                                })) || []
+                            }
+                        />
+                    )}
                 </div>
             ),
         },
@@ -522,12 +523,7 @@ Answer ONLY with one of the given grading or evaluation options.
                 </center>
             </div>
             <div>
-                <Table
-                    dataSource={rows}
-                    columns={columns}
-                    pagination={false}
-                    rowClassName={() => "editable-row"}
-                />
+                <Table dataSource={rows} columns={columns} pagination={false} />
             </div>
         </div>
     )
diff --git a/agenta-web/src/components/EvaluationTable/CustomCodeRunEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/CustomCodeRunEvaluationTable.tsx
index e378bd2f01..eeb8fd2c5e 100644
--- a/agenta-web/src/components/EvaluationTable/CustomCodeRunEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/CustomCodeRunEvaluationTable.tsx
@@ -36,6 +36,7 @@ import SecondaryButton from "../SecondaryButton/SecondaryButton"
 import {exportCustomCodeEvaluationData} from "@/lib/helpers/evaluate"
 import CodeBlock from "../DynamicCodeBlock/CodeBlock"
 import {contentToChatMessageString, testsetRowToChatMessages} from "@/lib/helpers/testset"
+import ParamsForm from "../Playground/ParamsForm/ParamsForm"
 
 const {Title} = Typography
 
@@ -209,13 +210,10 @@ const CustomCodeRunEvaluationTable: React.FC<CustomCodeEvaluationTableProps> = (
         getTests()
     }, [evaluation])
 
-    const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
-        rowIndex: any,
-        inputFieldKey: number,
-    ) => {
+    const handleInputChange = (value: any, name: string, rowIndex: any) => {
         const newRows = [...rows]
-        newRows[rowIndex].inputs[inputFieldKey].input_value = e.target.value
+        const ip = newRows[rowIndex].inputs.find((ip) => ip.input_name === name)
+        if (ip) ip.input_value = value
         setRows(newRows)
     }
 
@@ -412,22 +410,25 @@ const CustomCodeRunEvaluationTable: React.FC<CustomCodeEvaluationTableProps> = (
             dataIndex: "inputs",
             render: (text: any, record: CustomCodeEvaluationTableRow, rowIndex: number) => (
                 <div>
-                    {evaluation.testset.testsetChatColumn
-                        ? evaluation.testset.csvdata[rowIndex][
-                              evaluation.testset.testsetChatColumn
-                          ] || " - "
-                        : record &&
-                          record.inputs &&
-                          record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
-                          record.inputs.map((input: any, index: number) => (
-                              <div className={classes.recordInput} key={index}>
-                                  <Input
-                                      placeholder={input.input_name}
-                                      value={input.input_value}
-                                      onChange={(e) => handleInputChange(e, record.id, index)}
-                                  />
-                              </div>
-                          ))}
+                    {evaluation.testset.testsetChatColumn ? (
+                        evaluation.testset.csvdata[rowIndex][
+                            evaluation.testset.testsetChatColumn
+                        ] || " - "
+                    ) : (
+                        <ParamsForm
+                            isChatVariant={false}
+                            onParamChange={(name, value) =>
+                                handleInputChange(value, name, rowIndex)
+                            }
+                            inputParams={
+                                variantData[0].inputParams?.map((item) => ({
+                                    ...item,
+                                    value: record.inputs.find((ip) => ip.input_name === item.name)
+                                        ?.input_value,
+                                })) || []
+                            }
+                        />
+                    )}
                 </div>
             ),
         },
@@ -522,12 +523,7 @@ const CustomCodeRunEvaluationTable: React.FC<CustomCodeEvaluationTableProps> = (
             )}
 
             <div>
-                <Table
-                    dataSource={rows}
-                    columns={columns}
-                    pagination={false}
-                    rowClassName={() => "editable-row"}
-                />
+                <Table dataSource={rows} columns={columns} pagination={false} />
             </div>
 
             <Modal
diff --git a/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
index 0377c20758..7c038fff7d 100644
--- a/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
@@ -30,6 +30,7 @@ import {exportExactEvaluationData} from "@/lib/helpers/evaluate"
 import SecondaryButton from "../SecondaryButton/SecondaryButton"
 import {contentToChatMessageString, testsetRowToChatMessages} from "@/lib/helpers/testset"
 import {Evaluation} from "@/lib/Types"
+import ParamsForm from "../Playground/ParamsForm/ParamsForm"
 
 const {Title} = Typography
 
@@ -152,13 +153,10 @@ const ExactMatchEvaluationTable: React.FC<ExactMatchEvaluationTableProps> = ({
         setAccuracy(accuracy)
     }, [rows])
 
-    const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
-        rowIndex: any,
-        inputFieldKey: number,
-    ) => {
+    const handleInputChange = (value: any, name: string, rowIndex: any) => {
         const newRows = [...rows]
-        newRows[rowIndex].inputs[inputFieldKey].input_value = e.target.value
+        const ip = newRows[rowIndex].inputs.find((ip) => ip.input_name === name)
+        if (ip) ip.input_value = value
         setRows(newRows)
     }
 
@@ -314,22 +312,25 @@ const ExactMatchEvaluationTable: React.FC<ExactMatchEvaluationTableProps> = ({
             dataIndex: "inputs",
             render: (text: any, record: ExactMatchEvaluationTableRow, rowIndex: number) => (
                 <div>
-                    {evaluation.testset.testsetChatColumn
-                        ? evaluation.testset.csvdata[rowIndex][
-                              evaluation.testset.testsetChatColumn
-                          ] || " - "
-                        : record &&
-                          record.inputs &&
-                          record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
-                          record.inputs.map((input: any, index: number) => (
-                              <div className={classes.recordInput} key={index}>
-                                  <Input
-                                      placeholder={input.input_name}
-                                      value={input.input_value}
-                                      onChange={(e) => handleInputChange(e, record.id, index)}
-                                  />
-                              </div>
-                          ))}
+                    {evaluation.testset.testsetChatColumn ? (
+                        evaluation.testset.csvdata[rowIndex][
+                            evaluation.testset.testsetChatColumn
+                        ] || " - "
+                    ) : (
+                        <ParamsForm
+                            isChatVariant={false}
+                            onParamChange={(name, value) =>
+                                handleInputChange(value, name, rowIndex)
+                            }
+                            inputParams={
+                                variantData[0].inputParams?.map((item) => ({
+                                    ...item,
+                                    value: record.inputs.find((ip) => ip.input_name === item.name)
+                                        ?.input_value,
+                                })) || []
+                            }
+                        />
+                    )}
                 </div>
             ),
         },
@@ -432,13 +433,7 @@ const ExactMatchEvaluationTable: React.FC<ExactMatchEvaluationTableProps> = ({
                 </Row>
             </div>
             <div>
-                <Table
-                    dataSource={rows}
-                    columns={columns}
-                    pagination={false}
-                    rowClassName={() => "editable-row"}
-                    rowKey="id"
-                />
+                <Table dataSource={rows} columns={columns} pagination={false} rowKey="id" />
             </div>
         </div>
     )
diff --git a/agenta-web/src/components/EvaluationTable/RegexEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/RegexEvaluationTable.tsx
index 348acba9c0..996e4b68fa 100644
--- a/agenta-web/src/components/EvaluationTable/RegexEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/RegexEvaluationTable.tsx
@@ -30,6 +30,7 @@ import SecondaryButton from "../SecondaryButton/SecondaryButton"
 import {exportRegexEvaluationData} from "@/lib/helpers/evaluate"
 import {isValidRegex} from "@/lib/helpers/validators"
 import {contentToChatMessageString, testsetRowToChatMessages} from "@/lib/helpers/testset"
+import ParamsForm from "../Playground/ParamsForm/ParamsForm"
 
 const {Title} = Typography
 
@@ -164,13 +165,10 @@ const RegexEvaluationTable: React.FC<RegexEvaluationTableProps> = ({
         setAccuracy(accuracy)
     }, [rows])
 
-    const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
-        rowIndex: any,
-        inputFieldKey: number,
-    ) => {
+    const handleInputChange = (value: any, name: string, rowIndex: any) => {
         const newRows = [...rows]
-        newRows[rowIndex].inputs[inputFieldKey].input_value = e.target.value
+        const ip = newRows[rowIndex].inputs.find((ip) => ip.input_name === name)
+        if (ip) ip.input_value = value
         setRows(newRows)
     }
 
@@ -330,22 +328,25 @@ const RegexEvaluationTable: React.FC<RegexEvaluationTableProps> = ({
             dataIndex: "inputs",
             render: (_: any, record: RegexEvaluationTableRow, rowIndex: number) => (
                 <div>
-                    {evaluation.testset.testsetChatColumn
-                        ? evaluation.testset.csvdata[rowIndex][
-                              evaluation.testset.testsetChatColumn
-                          ] || " - "
-                        : record &&
-                          record.inputs &&
-                          record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
-                          record.inputs.map((input: any, index: number) => (
-                              <div className={classes.recordInput} key={index}>
-                                  <Input
-                                      placeholder={input.input_name}
-                                      value={input.input_value}
-                                      onChange={(e) => handleInputChange(e, record.id, index)}
-                                  />
-                              </div>
-                          ))}
+                    {evaluation.testset.testsetChatColumn ? (
+                        evaluation.testset.csvdata[rowIndex][
+                            evaluation.testset.testsetChatColumn
+                        ] || " - "
+                    ) : (
+                        <ParamsForm
+                            isChatVariant={false}
+                            onParamChange={(name, value) =>
+                                handleInputChange(value, name, rowIndex)
+                            }
+                            inputParams={
+                                variantData[0].inputParams?.map((item) => ({
+                                    ...item,
+                                    value: record.inputs.find((ip) => ip.input_name === item.name)
+                                        ?.input_value,
+                                })) || []
+                            }
+                        />
+                    )}
                 </div>
             ),
         },
@@ -500,12 +501,7 @@ const RegexEvaluationTable: React.FC<RegexEvaluationTableProps> = ({
             )}
 
             <div>
-                <Table
-                    dataSource={rows}
-                    columns={columns}
-                    pagination={false}
-                    rowClassName={() => "editable-row"}
-                />
+                <Table dataSource={rows} columns={columns} pagination={false} />
             </div>
         </div>
     )
diff --git a/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
index 70d138f4a6..96ac5cb380 100644
--- a/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
@@ -26,6 +26,7 @@ import {createUseStyles} from "react-jss"
 import {exportSimilarityEvaluationData} from "@/lib/helpers/evaluate"
 import SecondaryButton from "../SecondaryButton/SecondaryButton"
 import {contentToChatMessageString, testsetRowToChatMessages} from "@/lib/helpers/testset"
+import ParamsForm from "../Playground/ParamsForm/ParamsForm"
 
 const {Title} = Typography
 
@@ -166,13 +167,10 @@ const SimilarityMatchEvaluationTable: React.FC<SimilarityMatchEvaluationTablePro
         setAccuracy(accuracy)
     }, [rows])
 
-    const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
-        rowIndex: any,
-        inputFieldKey: number,
-    ) => {
+    const handleInputChange = (value: any, name: string, rowIndex: any) => {
         const newRows = [...rows]
-        newRows[rowIndex].inputs[inputFieldKey].input_value = e.target.value
+        const ip = newRows[rowIndex].inputs.find((ip) => ip.input_name === name)
+        if (ip) ip.input_value = value
         setRows(newRows)
     }
 
@@ -316,22 +314,25 @@ const SimilarityMatchEvaluationTable: React.FC<SimilarityMatchEvaluationTablePro
             dataIndex: "inputs",
             render: (text: any, record: SimilarityMatchEvaluationTableRow, rowIndex: number) => (
                 <div>
-                    {evaluation.testset.testsetChatColumn
-                        ? evaluation.testset.csvdata[rowIndex][
-                              evaluation.testset.testsetChatColumn
-                          ] || " - "
-                        : record &&
-                          record.inputs &&
-                          record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
-                          record.inputs.map((input: any, index: number) => (
-                              <div className={classes.recordInput} key={index}>
-                                  <Input
-                                      placeholder={input.input_name}
-                                      value={input.input_value}
-                                      onChange={(e) => handleInputChange(e, record.id, index)}
-                                  />
-                              </div>
-                          ))}
+                    {evaluation.testset.testsetChatColumn ? (
+                        evaluation.testset.csvdata[rowIndex][
+                            evaluation.testset.testsetChatColumn
+                        ] || " - "
+                    ) : (
+                        <ParamsForm
+                            isChatVariant={false}
+                            onParamChange={(name, value) =>
+                                handleInputChange(value, name, rowIndex)
+                            }
+                            inputParams={
+                                variantData[0].inputParams?.map((item) => ({
+                                    ...item,
+                                    value: record.inputs.find((ip) => ip.input_name === item.name)
+                                        ?.input_value,
+                                })) || []
+                            }
+                        />
+                    )}
                 </div>
             ),
         },
@@ -467,12 +468,7 @@ const SimilarityMatchEvaluationTable: React.FC<SimilarityMatchEvaluationTablePro
             )}
 
             <div>
-                <Table
-                    dataSource={rows}
-                    columns={columns}
-                    pagination={false}
-                    rowClassName={() => "editable-row"}
-                />
+                <Table dataSource={rows} columns={columns} pagination={false} />
             </div>
         </div>
     )
diff --git a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
index 5a1fdaad36..6b0004c632 100644
--- a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
@@ -35,6 +35,7 @@ import {EvaluationTypeLabels, camelToSnake} from "@/lib/helpers/utils"
 import {testsetRowToChatMessages} from "@/lib/helpers/testset"
 import {debounce} from "lodash"
 import EvaluationVotePanel from "../Evaluations/EvaluationCardView/EvaluationVotePanel"
+import ParamsForm from "../Playground/ParamsForm/ParamsForm"
 
 const {Title} = Typography
 
@@ -78,6 +79,7 @@ const useStyles = createUseStyles({
         "& button": {
             marginLeft: 10,
         },
+        marginTop: "0.75rem",
     },
     recordInput: {
         marginBottom: 10,
@@ -337,22 +339,29 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
             dataIndex: "inputs",
             render: (text: any, record: SingleModelEvaluationRow, rowIndex: number) => (
                 <div>
-                    {evaluation.testset.testsetChatColumn
-                        ? evaluation.testset.csvdata[rowIndex][
-                              evaluation.testset.testsetChatColumn
-                          ] || " - "
-                        : record &&
-                          record.inputs &&
-                          record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
-                          record.inputs.map((input: any, index: number) => (
-                              <div className={classes.recordInput} key={index}>
-                                  <Input
-                                      placeholder={input.input_name}
-                                      value={input.input_value}
-                                      onChange={(e) => handleInputChange(e, record.id, index)}
-                                  />
-                              </div>
-                          ))}
+                    {evaluation.testset.testsetChatColumn ? (
+                        evaluation.testset.csvdata[rowIndex][
+                            evaluation.testset.testsetChatColumn
+                        ] || " - "
+                    ) : (
+                        <ParamsForm
+                            isChatVariant={false}
+                            onParamChange={(name, value) =>
+                                handleInputChange(
+                                    {target: {value}} as any,
+                                    record.id,
+                                    record?.inputs.findIndex((ip) => ip.input_name === name),
+                                )
+                            }
+                            inputParams={
+                                variantData[0].inputParams?.map((item) => ({
+                                    ...item,
+                                    value: record.inputs.find((ip) => ip.input_name === item.name)
+                                        ?.input_value,
+                                })) || []
+                            }
+                        />
+                    )}
 
                     <div className={classes.inputTestBtn}>
                         <Button
@@ -451,7 +460,6 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
                     dataSource={rows}
                     columns={columns}
                     pagination={false}
-                    rowClassName={() => "editable-row"}
                     rowKey={(record) => record.id!}
                 />
             ) : (
@@ -463,6 +471,7 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
                     onInputChange={handleInputChange}
                     updateEvaluationScenarioData={updateEvaluationScenarioData}
                     evaluation={evaluation}
+                    variantData={variantData}
                 />
             )}
         </div>
diff --git a/agenta-web/src/components/EvaluationTable/WebhookEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/WebhookEvaluationTable.tsx
index 9f8001f65a..cf7776838f 100644
--- a/agenta-web/src/components/EvaluationTable/WebhookEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/WebhookEvaluationTable.tsx
@@ -25,10 +25,11 @@ import {EvaluationFlow} from "@/lib/enums"
 import {evaluateWithWebhook} from "@/lib/services/evaluations"
 import {createUseStyles} from "react-jss"
 import {globalErrorHandler} from "@/lib/helpers/errorHandler"
-import {isValidUrl} from "@/lib/helpers/validators"
+import {isValidHttpUrl} from "@/lib/helpers/validators"
 import SecondaryButton from "../SecondaryButton/SecondaryButton"
 import {exportWebhookEvaluationData} from "@/lib/helpers/evaluate"
 import {contentToChatMessageString, testsetRowToChatMessages} from "@/lib/helpers/testset"
+import ParamsForm from "../Playground/ParamsForm/ParamsForm"
 
 const {Title} = Typography
 
@@ -144,13 +145,10 @@ const WebhookEvaluationTable: React.FC<WebhookEvaluationTableProps> = ({
         setAccuracy(avg * 100)
     }, [rows])
 
-    const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
-        rowIndex: any,
-        inputFieldKey: number,
-    ) => {
+    const handleInputChange = (value: any, name: string, rowIndex: any) => {
         const newRows = [...rows]
-        newRows[rowIndex].inputs[inputFieldKey].input_value = e.target.value
+        const ip = newRows[rowIndex].inputs.find((ip) => ip.input_name === name)
+        if (ip) ip.input_value = value
         setRows(newRows)
     }
 
@@ -302,22 +300,25 @@ const WebhookEvaluationTable: React.FC<WebhookEvaluationTableProps> = ({
             dataIndex: "inputs",
             render: (_: any, record: WebhookEvaluationTableRow, rowIndex: number) => (
                 <div>
-                    {evaluation.testset.testsetChatColumn
-                        ? evaluation.testset.csvdata[rowIndex][
-                              evaluation.testset.testsetChatColumn
-                          ] || " - "
-                        : record &&
-                          record.inputs &&
-                          record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
-                          record.inputs.map((input: any, index: number) => (
-                              <div className={classes.recordInput} key={index}>
-                                  <Input
-                                      placeholder={input.input_name}
-                                      value={input.input_value}
-                                      onChange={(e) => handleInputChange(e, record.id, index)}
-                                  />
-                              </div>
-                          ))}
+                    {evaluation.testset.testsetChatColumn ? (
+                        evaluation.testset.csvdata[rowIndex][
+                            evaluation.testset.testsetChatColumn
+                        ] || " - "
+                    ) : (
+                        <ParamsForm
+                            isChatVariant={false}
+                            onParamChange={(name, value) =>
+                                handleInputChange(value, name, rowIndex)
+                            }
+                            inputParams={
+                                variantData[0].inputParams?.map((item) => ({
+                                    ...item,
+                                    value: record.inputs.find((ip) => ip.input_name === item.name)
+                                        ?.input_value,
+                                })) || []
+                            }
+                        />
+                    )}
                 </div>
             ),
         },
@@ -442,7 +443,7 @@ const WebhookEvaluationTable: React.FC<WebhookEvaluationTableProps> = ({
                             {
                                 validator: (_, value) =>
                                     new Promise((res, rej) =>
-                                        isValidUrl(value)
+                                        isValidHttpUrl(value)
                                             ? res("")
                                             : rej("Please enter a valid url"),
                                     ),
@@ -455,12 +456,7 @@ const WebhookEvaluationTable: React.FC<WebhookEvaluationTableProps> = ({
             )}
 
             <div>
-                <Table
-                    dataSource={rows}
-                    columns={columns}
-                    pagination={false}
-                    rowClassName={() => "editable-row"}
-                />
+                <Table dataSource={rows} columns={columns} pagination={false} />
             </div>
         </div>
     )
diff --git a/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx b/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
index ed1e9476a1..6de7ffc6ee 100644
--- a/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
+++ b/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
@@ -22,6 +22,8 @@ import {testsetRowToChatMessages} from "@/lib/helpers/testset"
 import {safeParse} from "@/lib/helpers/utils"
 import {debounce} from "lodash"
 import {EvaluationType} from "@/lib/enums"
+import ParamsForm from "@/components/Playground/ParamsForm/ParamsForm"
+import {useVariants} from "@/lib/hooks/useVariant"
 
 export const VARIANT_COLORS = [
     "#297F87", // "#722ed1",
@@ -132,6 +134,7 @@ interface Props {
     onInputChange: Function
     updateEvaluationScenarioData: (id: string, data: Partial<EvaluationScenario>) => void
     evaluation: Evaluation
+    variantData: ReturnType<typeof useVariants>
 }
 
 const EvaluationCardView: React.FC<Props> = ({
@@ -142,6 +145,7 @@ const EvaluationCardView: React.FC<Props> = ({
     onInputChange,
     updateEvaluationScenarioData,
     evaluation,
+    variantData,
 }) => {
     const classes = useStyles()
     const {token} = theme.useToken()
@@ -338,20 +342,30 @@ const EvaluationCardView: React.FC<Props> = ({
                             </Button>
                         </div>
 
-                        {isChat ? (
-                            <div className={classes.chatInputsCon}>
-                                <ChatInputs
-                                    key={scenarioId}
-                                    defaultValue={chat}
-                                    onChange={onChatChange}
-                                />
-                            </div>
-                        ) : (
-                            <EvaluationInputs
-                                evaluationScenario={scenario}
-                                onInputChange={onInputChange}
-                            />
-                        )}
+                        <ParamsForm
+                            isChatVariant={isChat}
+                            onParamChange={(name, value) =>
+                                isChat
+                                    ? onChatChange(value)
+                                    : onInputChange(
+                                          {target: {value}} as any,
+                                          scenarioId,
+                                          scenario.inputs.findIndex((ip) => ip.input_name === name),
+                                      )
+                            }
+                            inputParams={
+                                isChat
+                                    ? [{name: "chat", value: chat} as any]
+                                    : variantData[0].inputParams?.map((item) => ({
+                                          ...item,
+                                          value: scenario.inputs.find(
+                                              (ip) => ip.input_name === item.name,
+                                          )?.input_value,
+                                      })) || []
+                            }
+                            key={scenarioId}
+                            useChatDefaultValue
+                        />
 
                         <div className={classes.toolBar}>
                             <Tooltip title="Instructions">
diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
new file mode 100644
index 0000000000..b102625fe8
--- /dev/null
+++ b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -0,0 +1,107 @@
+import React from "react"
+import ChatInputs from "@/components/ChatInputs/ChatInputs"
+import {GenericObject, Parameter} from "@/lib/Types"
+import {renameVariables} from "@/lib/helpers/utils"
+import {Form, Image, Input} from "antd"
+import {createUseStyles} from "react-jss"
+
+const useStyles = createUseStyles({
+    form: {
+        width: "100%",
+        "& .ant-form-item": {
+            marginBottom: "0px",
+        },
+    },
+    formItemRow: {
+        display: "flex",
+        gap: "0.5rem",
+        alignItems: "flex-start",
+        marginTop: "1rem",
+
+        "& .ant-input": {
+            marginTop: 1,
+        },
+    },
+    cover: {
+        objectFit: "cover",
+        borderRadius: 6,
+    },
+})
+
+interface Props {
+    inputParams: (Parameter & {value: any})[]
+    onFinish?: (values: GenericObject) => void
+    onParamChange?: (name: string, value: any) => void
+    isChatVariant?: boolean
+    useChatDefaultValue?: boolean
+}
+
+const ParamsForm: React.FC<Props> = ({
+    inputParams,
+    onFinish,
+    onParamChange,
+    isChatVariant,
+    useChatDefaultValue,
+}) => {
+    const classes = useStyles()
+    const [form] = Form.useForm()
+
+    const chat = inputParams.find((param) => param.name === "chat")?.value
+
+    return isChatVariant ? (
+        <ChatInputs
+            value={useChatDefaultValue ? undefined : chat}
+            defaultValue={useChatDefaultValue ? chat : undefined}
+            onChange={(val) => onParamChange?.("chat", val)}
+        />
+    ) : (
+        <Form form={form} className={classes.form} onFinish={onFinish}>
+            {/*@ts-ignore*/}
+            {(_, formInstance) =>
+                inputParams.map((param, index) => {
+                    const type = param.type === "file_url" ? "url" : param.type
+                    return (
+                        <Form.Item
+                            key={param.name}
+                            name={param.name}
+                            rules={[
+                                {
+                                    required: param.required,
+                                    message: "This field is required",
+                                },
+                                {
+                                    type: type as any,
+                                    message: `Must be a valid ${type}`,
+                                },
+                            ]}
+                        >
+                            <div className={classes.formItemRow}>
+                                {type === "url" &&
+                                    param.value &&
+                                    formInstance.getFieldError(param.name).length === 0 && (
+                                        <Image
+                                            src={param.value}
+                                            width={140}
+                                            height={90}
+                                            className={classes.cover}
+                                            fallback="/assets/fallback.png"
+                                        />
+                                    )}
+                                <Input.TextArea
+                                    data-cy={`testview-input-parameters-${index}`}
+                                    key={index}
+                                    value={param.value}
+                                    placeholder={`${renameVariables(param.name)} (${type})`}
+                                    onChange={(e) => onParamChange?.(param.name, e.target.value)}
+                                    autoSize={{minRows: 2, maxRows: 8}}
+                                />
+                            </div>
+                        </Form.Item>
+                    )
+                })
+            }
+        </Form>
+    )
+}
+
+export default ParamsForm
diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index ba34c49c78..fc3588057a 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/agenta-web/src/components/Playground/Views/TestView.tsx
@@ -1,9 +1,9 @@
 import React, {useState} from "react"
-import {Button, Input, Card, Row, Col, Space} from "antd"
+import {Button, Input, Card, Row, Col, Space, Form} from "antd"
 import {CaretRightOutlined, PlusOutlined} from "@ant-design/icons"
 import {callVariant} from "@/lib/services/api"
 import {ChatMessage, ChatRole, GenericObject, Parameter, Variant} from "@/lib/Types"
-import {randString, removeKeys, renameVariables, safeParse} from "@/lib/helpers/utils"
+import {randString, removeKeys} from "@/lib/helpers/utils"
 import LoadTestsModal from "../LoadTestsModal"
 import AddToTestSetDrawer from "../AddToTestSetDrawer/AddToTestSetDrawer"
 import {DeleteOutlined} from "@ant-design/icons"
@@ -11,10 +11,12 @@ import {getErrorMessage} from "@/lib/helpers/errorHandler"
 import {createUseStyles} from "react-jss"
 import CopyButton from "@/components/CopyButton/CopyButton"
 import {useRouter} from "next/router"
-import ChatInputs, {getDefaultNewMessage} from "@/components/ChatInputs/ChatInputs"
+import {getDefaultNewMessage} from "@/components/ChatInputs/ChatInputs"
 import {v4 as uuidv4} from "uuid"
 import {testsetRowToChatMessages} from "@/lib/helpers/testset"
+import ParamsForm from "../ParamsForm/ParamsForm"
 
+const {TextArea} = Input
 const LOADING_TEXT = "Loading..."
 
 const useStylesBox = createUseStyles({
@@ -110,18 +112,16 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
     isChatVariant = false,
 }) => {
     const classes = useStylesBox()
-    const {TextArea} = Input
     const loading = result === LOADING_TEXT
+    const [form] = Form.useForm()
 
     if (!inputParams) {
         return <div>Loading...</div>
     }
 
-    const inputParamsNames = inputParams.map((param) => param.name)
-
     const handleAddToTestset = () => {
         const params: Record<string, string> = {}
-        inputParamsNames.forEach((name) => {
+        inputParams.forEach(({name}) => {
             params[name] = testData[name] || ""
         })
         params.correct_answer = result
@@ -142,22 +142,16 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
             </Row>
 
             <Row className={classes.row1}>
-                {isChatVariant ? (
-                    <ChatInputs
-                        value={testData.chat}
-                        onChange={(val) => onInputParamChange("chat", val)}
-                    />
-                ) : (
-                    inputParamsNames.map((key, index) => (
-                        <TextArea
-                            data-cy={`testview-input-parameters-${index}`}
-                            key={index}
-                            value={testData[key]}
-                            placeholder={renameVariables(key)}
-                            onChange={(e) => onInputParamChange(key, e.target.value)}
-                        />
-                    ))
-                )}
+                <ParamsForm
+                    isChatVariant={isChatVariant}
+                    inputParams={
+                        isChatVariant
+                            ? [{value: testData.chat, name: "chat"} as any]
+                            : inputParams.map((item) => ({...item, value: testData[item.name]}))
+                    }
+                    onFinish={onRun}
+                    onParamChange={onInputParamChange}
+                />
             </Row>
             <Row className={classes.row2} style={{marginBottom: isChatVariant ? 12 : 0}}>
                 <Col span={24} className={classes.row2Col}>
@@ -180,7 +174,7 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                         type="primary"
                         shape="round"
                         icon={<CaretRightOutlined />}
-                        onClick={onRun}
+                        onClick={isChatVariant ? onRun : form.submit}
                         loading={loading}
                     >
                         Run
diff --git a/agenta-web/src/lib/helpers/openapi_parser.ts b/agenta-web/src/lib/helpers/openapi_parser.ts
index 1de48c0afb..5618cc617d 100644
--- a/agenta-web/src/lib/helpers/openapi_parser.ts
+++ b/agenta-web/src/lib/helpers/openapi_parser.ts
@@ -35,7 +35,7 @@ export const openAISchemaToParameters = (schema: GenericObject): Parameter[] =>
         ([name, param]: [string, any]) => {
             const parameter = {
                 name: name,
-                input: param["x-parameter"] ? false : true,
+                input: !param["x-parameter"] || param["x-parameter"] === "file_url" ? true : false,
                 type: param["x-parameter"] ? determineType(param["x-parameter"]) : "string",
                 default: param.default,
                 enum: param["enum"] ? param.enum : [],
@@ -62,6 +62,8 @@ const determineType = (xParam: any): string => {
             return "object"
         case "int":
             return "integer"
+        case "file_url":
+            return "file_url"
         default:
             return "string"
     }
diff --git a/agenta-web/src/lib/helpers/testset.ts b/agenta-web/src/lib/helpers/testset.ts
index 00064fbde1..820aa3ce2b 100644
--- a/agenta-web/src/lib/helpers/testset.ts
+++ b/agenta-web/src/lib/helpers/testset.ts
@@ -1,6 +1,7 @@
 import {getDefaultNewMessage} from "@/components/ChatInputs/ChatInputs"
 import {ChatRole, GenericObject, KeyValuePair} from "../Types"
 import {safeParse} from "./utils"
+import {v4 as uuidv4} from "uuid"
 
 const isObjectChatMessage = (obj: GenericObject) => {
     return Object.values(ChatRole).includes(obj.role) && typeof obj.content === "string"
@@ -50,7 +51,7 @@ export function testsetRowToChatMessages(rowData: KeyValuePair, includeCorrectAn
         chat = chat.concat([safeParse(rowData.correct_answer, defaultNewMessage)])
     }
 
-    return chat
+    return chat.map((item: KeyValuePair) => ({...item, id: uuidv4()}))
 }
 
 export function contentToChatMessageString(content: string, role: ChatRole = ChatRole.Assistant) {
diff --git a/agenta-web/src/lib/helpers/validators.ts b/agenta-web/src/lib/helpers/validators.ts
index d9e5ee05ac..503be68346 100644
--- a/agenta-web/src/lib/helpers/validators.ts
+++ b/agenta-web/src/lib/helpers/validators.ts
@@ -1,7 +1,7 @@
-export function isValidUrl(url: string) {
+export const isValidHttpUrl = (url: string) => {
     try {
-        new URL(url)
-        return true
+        const newUrl = new URL(url)
+        return newUrl.protocol.startsWith("http")
     } catch (_) {
         return false
     }
diff --git a/examples/vision_gpt_explain_image/.gitignore b/examples/vision_gpt_explain_image/.gitignore
new file mode 100644
index 0000000000..003430f461
--- /dev/null
+++ b/examples/vision_gpt_explain_image/.gitignore
@@ -0,0 +1,7 @@
+# Environments 
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+myenv/
diff --git a/examples/vision_gpt_explain_image/app.py b/examples/vision_gpt_explain_image/app.py
index b14901e396..fdc2a7c175 100644
--- a/examples/vision_gpt_explain_image/app.py
+++ b/examples/vision_gpt_explain_image/app.py
@@ -45,6 +45,6 @@ def explain(
     chat_completion = client.chat.completions.create(
         model="gpt-4-vision-preview",
         messages=messages,
-        max_tokens=max_tokens,
+        max_tokens=ag.config.max_tokens,
     )
     return chat_completion.choices[0].message.content

From 016c119c6666f49d1c66ebf67611f4e78b34f467 Mon Sep 17 00:00:00 2001
From: MohammedMaaz <maazkhawar25@gmail.com>
Date: Thu, 7 Dec 2023 16:23:50 +0500
Subject: [PATCH 2/3] fixed bugs with run button | improved param validations

---
 .../ABTestingEvaluationTable.tsx              |  72 +++--------
 .../SimilarityMatchEvaluationTable.tsx        |   1 -
 .../SingleModelEvaluationTable.tsx            | 114 +++++++++++-------
 .../Evaluations/EvaluationCardView/index.tsx  |   9 +-
 .../Playground/ParamsForm/ParamsForm.tsx      |  12 +-
 .../components/Playground/Views/TestView.tsx  |   8 +-
 6 files changed, 108 insertions(+), 108 deletions(-)

diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index 8a1a0ffb42..873b67e5c3 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -1,20 +1,6 @@
 import {useState, useEffect} from "react"
 import type {ColumnType} from "antd/es/table"
-import {CaretRightOutlined} from "@ant-design/icons"
-import {
-    Button,
-    Card,
-    Col,
-    Input,
-    Radio,
-    Row,
-    Space,
-    Spin,
-    Statistic,
-    Table,
-    Typography,
-    message,
-} from "antd"
+import {Button, Card, Col, Radio, Row, Space, Statistic, Table, Typography, message} from "antd"
 import {
     updateEvaluationScenario,
     callVariant,
@@ -34,7 +20,7 @@ import {EvaluationTypeLabels, camelToSnake} from "@/lib/helpers/utils"
 import {testsetRowToChatMessages} from "@/lib/helpers/testset"
 import EvaluationVotePanel from "../Evaluations/EvaluationCardView/EvaluationVotePanel"
 import VariantAlphabet from "../Evaluations/EvaluationCardView/VariantAlphabet"
-import ParamsForm from "../Playground/ParamsForm/ParamsForm"
+import {ParamsFormWithRun} from "./SingleModelEvaluationTable"
 
 const {Title} = Typography
 
@@ -335,42 +321,24 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 </div>
             ),
             dataIndex: "inputs",
-            render: (text: any, record: ABTestingEvaluationTableRow, rowIndex: number) => (
-                <div>
-                    {evaluation.testset.testsetChatColumn ? (
-                        evaluation.testset.csvdata[rowIndex][
-                            evaluation.testset.testsetChatColumn
-                        ] || " - "
-                    ) : (
-                        <ParamsForm
-                            isChatVariant={false}
-                            onParamChange={(name, value) =>
-                                handleInputChange(
-                                    {target: {value}} as any,
-                                    record.id,
-                                    record?.inputs.findIndex((ip) => ip.input_name === name),
-                                )
-                            }
-                            inputParams={
-                                variantData[0].inputParams?.map((item) => ({
-                                    ...item,
-                                    value: record.inputs.find((ip) => ip.input_name === item.name)
-                                        ?.input_value,
-                                })) || []
-                            }
-                        />
-                    )}
-
-                    <div className={classes.inputTestBtn}>
-                        <Button
-                            onClick={() => runEvaluation(record.id!)}
-                            icon={<CaretRightOutlined />}
-                        >
-                            Run
-                        </Button>
-                    </div>
-                </div>
-            ),
+            render: (_: any, record: ABTestingEvaluationTableRow, rowIndex: number) => {
+                return (
+                    <ParamsFormWithRun
+                        evaluation={evaluation}
+                        record={record}
+                        rowIndex={rowIndex}
+                        onRun={() => runEvaluation(record.id!)}
+                        onParamChange={(name, value) =>
+                            handleInputChange(
+                                {target: {value}} as any,
+                                record.id,
+                                record?.inputs.findIndex((ip) => ip.input_name === name),
+                            )
+                        }
+                        variantData={variantData}
+                    />
+                )
+            },
         },
         ...dynamicColumns,
         {
diff --git a/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
index 96ac5cb380..c1cce3b59f 100644
--- a/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
@@ -6,7 +6,6 @@ import {
     Card,
     Col,
     Form,
-    Input,
     Row,
     Slider,
     Space,
diff --git a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
index d2402dc924..e375a61842 100644
--- a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
@@ -5,8 +5,7 @@ import {
     Button,
     Card,
     Col,
-    Input,
-    InputNumber,
+    Form,
     Radio,
     Row,
     Space,
@@ -16,12 +15,7 @@ import {
     Typography,
     message,
 } from "antd"
-import {
-    updateEvaluationScenario,
-    callVariant,
-    fetchEvaluationResults,
-    updateEvaluation,
-} from "@/lib/services/api"
+import {updateEvaluationScenario, callVariant, updateEvaluation} from "@/lib/services/api"
 import {useVariants} from "@/lib/hooks/useVariant"
 import {useRouter} from "next/router"
 import {EvaluationFlow} from "@/lib/enums"
@@ -107,6 +101,56 @@ const useStyles = createUseStyles({
     },
 })
 
+export const ParamsFormWithRun = ({
+    evaluation,
+    record,
+    rowIndex,
+    onRun,
+    onParamChange,
+    variantData,
+}: {
+    record: SingleModelEvaluationRow
+    rowIndex: number
+    evaluation: Evaluation
+    onRun: () => void
+    onParamChange: (name: string, value: any) => void
+    variantData: ReturnType<typeof useVariants>
+}) => {
+    const classes = useStyles()
+    const [form] = Form.useForm()
+
+    return (
+        <div>
+            {evaluation.testset.testsetChatColumn ? (
+                evaluation.testset.csvdata[rowIndex][evaluation.testset.testsetChatColumn] || " - "
+            ) : (
+                <ParamsForm
+                    isChatVariant={false}
+                    onParamChange={onParamChange}
+                    inputParams={
+                        variantData[0].inputParams?.map((item) => ({
+                            ...item,
+                            value: record.inputs.find((ip) => ip.input_name === item.name)
+                                ?.input_value,
+                        })) || []
+                    }
+                    onFinish={onRun}
+                    form={form}
+                />
+            )}
+
+            <div className={classes.inputTestBtn}>
+                <Button
+                    onClick={evaluation.testset.testsetChatColumn ? onRun : form.submit}
+                    icon={<CaretRightOutlined />}
+                >
+                    Run
+                </Button>
+            </div>
+        </div>
+    )
+}
+
 const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
     evaluation,
     evaluationScenarios,
@@ -337,42 +381,24 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
                 </div>
             ),
             dataIndex: "inputs",
-            render: (text: any, record: SingleModelEvaluationRow, rowIndex: number) => (
-                <div>
-                    {evaluation.testset.testsetChatColumn ? (
-                        evaluation.testset.csvdata[rowIndex][
-                            evaluation.testset.testsetChatColumn
-                        ] || " - "
-                    ) : (
-                        <ParamsForm
-                            isChatVariant={false}
-                            onParamChange={(name, value) =>
-                                handleInputChange(
-                                    {target: {value}} as any,
-                                    record.id,
-                                    record?.inputs.findIndex((ip) => ip.input_name === name),
-                                )
-                            }
-                            inputParams={
-                                variantData[0].inputParams?.map((item) => ({
-                                    ...item,
-                                    value: record.inputs.find((ip) => ip.input_name === item.name)
-                                        ?.input_value,
-                                })) || []
-                            }
-                        />
-                    )}
-
-                    <div className={classes.inputTestBtn}>
-                        <Button
-                            onClick={() => runEvaluation(record.id!)}
-                            icon={<CaretRightOutlined />}
-                        >
-                            Run
-                        </Button>
-                    </div>
-                </div>
-            ),
+            render: (_: any, record: SingleModelEvaluationRow, rowIndex: number) => {
+                return (
+                    <ParamsFormWithRun
+                        evaluation={evaluation}
+                        record={record}
+                        rowIndex={rowIndex}
+                        onRun={() => runEvaluation(record.id!)}
+                        onParamChange={(name, value) =>
+                            handleInputChange(
+                                {target: {value}} as any,
+                                record.id,
+                                record?.inputs.findIndex((ip) => ip.input_name === name),
+                            )
+                        }
+                        variantData={variantData}
+                    />
+                )
+            },
         },
         ...dynamicColumns,
         {
diff --git a/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx b/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
index 6de7ffc6ee..2fdf6221d3 100644
--- a/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
+++ b/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
@@ -8,16 +8,14 @@ import {
     QuestionCircleOutlined,
     RightOutlined,
 } from "@ant-design/icons"
-import {Button, Empty, Input, Space, Tooltip, Typography, theme} from "antd"
+import {Button, Empty, Form, Input, Space, Tooltip, Typography, theme} from "antd"
 import React, {useCallback, useEffect, useMemo, useRef} from "react"
 import {createUseStyles} from "react-jss"
 import EvaluationVotePanel from "./EvaluationVotePanel"
 import EvaluationCard from "./EvaluationCard"
-import EvaluationInputs from "./EvaluationInputs"
 import {ABTestingEvaluationTableRow} from "@/components/EvaluationTable/ABTestingEvaluationTable"
 import AlertPopup from "@/components/AlertPopup/AlertPopup"
 import {useLocalStorage} from "usehooks-ts"
-import ChatInputs from "@/components/ChatInputs/ChatInputs"
 import {testsetRowToChatMessages} from "@/lib/helpers/testset"
 import {safeParse} from "@/lib/helpers/utils"
 import {debounce} from "lodash"
@@ -174,6 +172,7 @@ const EvaluationCardView: React.FC<Props> = ({
     const isChat = !!evaluation.testset.testsetChatColumn
     const testsetRow = evaluation.testset.csvdata[scenarioIndex]
     const isAbTesting = evaluation.evaluationType === EvaluationType.human_a_b_testing
+    const [form] = Form.useForm()
 
     const loadPrevious = () => {
         if (scenarioIndex === 0) return
@@ -365,6 +364,8 @@ const EvaluationCardView: React.FC<Props> = ({
                             }
                             key={scenarioId}
                             useChatDefaultValue
+                            form={form}
+                            onFinish={() => onRun(scenarioId)}
                         />
 
                         <div className={classes.toolBar}>
@@ -400,7 +401,7 @@ const EvaluationCardView: React.FC<Props> = ({
                             <Tooltip title="Run (Enter ↵)">
                                 <PlayCircleOutlined
                                     style={{color: token.colorSuccessActive}}
-                                    onClick={() => onRun(scenarioId)}
+                                    onClick={form.submit}
                                 />
                             </Tooltip>
                         </div>
diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
index b102625fe8..67ec3b6a4a 100644
--- a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
+++ b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import ChatInputs from "@/components/ChatInputs/ChatInputs"
 import {GenericObject, Parameter} from "@/lib/Types"
 import {renameVariables} from "@/lib/helpers/utils"
-import {Form, Image, Input} from "antd"
+import {Form, FormInstance, Image, Input} from "antd"
 import {createUseStyles} from "react-jss"
 
 const useStyles = createUseStyles({
@@ -34,6 +34,7 @@ interface Props {
     onParamChange?: (name: string, value: any) => void
     isChatVariant?: boolean
     useChatDefaultValue?: boolean
+    form?: FormInstance<GenericObject>
 }
 
 const ParamsForm: React.FC<Props> = ({
@@ -42,9 +43,9 @@ const ParamsForm: React.FC<Props> = ({
     onParamChange,
     isChatVariant,
     useChatDefaultValue,
+    form,
 }) => {
     const classes = useStyles()
-    const [form] = Form.useForm()
 
     const chat = inputParams.find((param) => param.name === "chat")?.value
 
@@ -57,8 +58,8 @@ const ParamsForm: React.FC<Props> = ({
     ) : (
         <Form form={form} className={classes.form} onFinish={onFinish}>
             {/*@ts-ignore*/}
-            {(_, formInstance) =>
-                inputParams.map((param, index) => {
+            {(_, formInstance) => {
+                return inputParams.map((param, index) => {
                     const type = param.type === "file_url" ? "url" : param.type
                     return (
                         <Form.Item
@@ -74,6 +75,7 @@ const ParamsForm: React.FC<Props> = ({
                                     message: `Must be a valid ${type}`,
                                 },
                             ]}
+                            initialValue={param.value}
                         >
                             <div className={classes.formItemRow}>
                                 {type === "url" &&
@@ -99,7 +101,7 @@ const ParamsForm: React.FC<Props> = ({
                         </Form.Item>
                     )
                 })
-            }
+            }}
         </Form>
     )
 }
diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index dd696283d6..baee1848fe 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/agenta-web/src/components/Playground/Views/TestView.tsx
@@ -151,6 +151,7 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                     }
                     onFinish={onRun}
                     onParamChange={onInputParamChange}
+                    form={form}
                 />
             </Row>
             <Row className={classes.row2} style={{marginBottom: isChatVariant ? 12 : 0}}>
@@ -203,6 +204,7 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, variant, isChatVa
     const [resultsList, setResultsList] = useState<string[]>(testList.map(() => ""))
     const [params, setParams] = useState<Record<string, string> | null>(null)
     const classes = useStylesApp()
+    const rootRef = React.useRef<HTMLDivElement>(null)
 
     useEffect(() => {
         setResultsList((prevResultsList) => {
@@ -275,7 +277,9 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, variant, isChatVa
     }
 
     const handleRunAll = () => {
-        testList.forEach((_, index) => handleRun(index))
+        rootRef.current
+            ?.querySelectorAll("[data-cy=testview-input-parameters-run-button]")
+            .forEach((btn) => (btn as HTMLButtonElement).click())
     }
 
     const handleAddRow = () => {
@@ -312,7 +316,7 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, variant, isChatVa
     }
 
     return (
-        <div>
+        <div ref={rootRef}>
             <div className={classes.testView}>
                 <h2>2. Preview and test</h2>
                 <Space size={10}>

From 9f753e1733005df952a23391090ee59b2254abb3 Mon Sep 17 00:00:00 2001
From: MohammedMaaz <maazkhawar25@gmail.com>
Date: Thu, 7 Dec 2023 16:36:02 +0500
Subject: [PATCH 3/3] increased url image sizes

---
 .../EvaluationTable/SingleModelEvaluationTable.tsx       | 1 -
 .../components/Evaluations/EvaluationCardView/index.tsx  | 1 +
 .../src/components/Playground/ParamsForm/ParamsForm.tsx  | 9 +++++++--
 agenta-web/src/components/Playground/Views/TestView.tsx  | 1 +
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
index e375a61842..549a4ba381 100644
--- a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
@@ -9,7 +9,6 @@ import {
     Radio,
     Row,
     Space,
-    Spin,
     Statistic,
     Table,
     Typography,
diff --git a/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx b/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
index 2fdf6221d3..acbb06228a 100644
--- a/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
+++ b/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
@@ -366,6 +366,7 @@ const EvaluationCardView: React.FC<Props> = ({
                             useChatDefaultValue
                             form={form}
                             onFinish={() => onRun(scenarioId)}
+                            imageSize="large"
                         />
 
                         <div className={classes.toolBar}>
diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
index 67ec3b6a4a..8068f9d3a2 100644
--- a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
+++ b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -28,6 +28,8 @@ const useStyles = createUseStyles({
     },
 })
 
+const ASPECT_RATIO = 1.55
+
 interface Props {
     inputParams: (Parameter & {value: any})[]
     onFinish?: (values: GenericObject) => void
@@ -35,6 +37,7 @@ interface Props {
     isChatVariant?: boolean
     useChatDefaultValue?: boolean
     form?: FormInstance<GenericObject>
+    imageSize?: "small" | "large"
 }
 
 const ParamsForm: React.FC<Props> = ({
@@ -44,8 +47,10 @@ const ParamsForm: React.FC<Props> = ({
     isChatVariant,
     useChatDefaultValue,
     form,
+    imageSize = "small",
 }) => {
     const classes = useStyles()
+    const imgHeight = imageSize === "small" ? 90 : 120
 
     const chat = inputParams.find((param) => param.name === "chat")?.value
 
@@ -83,8 +88,8 @@ const ParamsForm: React.FC<Props> = ({
                                     formInstance.getFieldError(param.name).length === 0 && (
                                         <Image
                                             src={param.value}
-                                            width={140}
-                                            height={90}
+                                            width={imgHeight * ASPECT_RATIO}
+                                            height={imgHeight}
                                             className={classes.cover}
                                             fallback="/assets/fallback.png"
                                         />
diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index baee1848fe..b6d9bb5dfd 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/agenta-web/src/components/Playground/Views/TestView.tsx
@@ -152,6 +152,7 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                     onFinish={onRun}
                     onParamChange={onInputParamChange}
                     form={form}
+                    imageSize="large"
                 />
             </Row>
             <Row className={classes.row2} style={{marginBottom: isChatVariant ? 12 : 0}}>