doop doop

HarryR · Oct 19, 2024 · 015d7cf · 015d7cf
1 parent 81a7655
commit 015d7cf
Show file tree

Hide file tree

Showing 13 changed files with 395 additions and 61 deletions.
diff --git a/packages/frontend/.env.local b/packages/frontend/.env.local
@@ -1,6 +1,6 @@
 VITE_NETWORK=134
 VITE_WEB3_GATEWAY=https://bellecour.iex.ec
-VITE_CONTRACT_TASKRESULT_TX=0x24ec48d06ef6498c30f3695ddb545db6a333286b65565d193f46ddc6021d86a5
-VITE_CONTRACT_TASKRESULT=0xDbEE3804B4a6752a5006CC43985911Fb13e57dD1
-VITE_CONTRACT_LLMQUESTION_TX=0xb14f5e2beb0ae83d02fdedb70f5adeaf3602390bffbfed57d0c26773aef99dbc
-VITE_CONTRACT_LLMQUESTION=0x64C858D17D9503179976403deaCB83446198Fb06
+VITE_CONTRACT_TASKRESULT_TX=0xa2572210bfcd11d2bfecb3f4a08fff0303a139a9b7077e0b33421f8cb2cc985a
+VITE_CONTRACT_TASKRESULT=0x77B78c87FC2EeBE8D76C4D37d5091064B4a923F5
+VITE_CONTRACT_LLMQUESTION_TX=0xed0ccc8dbd57f5ac46c0489d76ebf919e8eb52213a878b64a1c251033aa2e610
+VITE_CONTRACT_LLMQUESTION=0x3790add8f936F5066515fA60B63F1069bB58ED10
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>AI + Blockchain = iExec?</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
@@ -9,6 +9,7 @@ import { RouterView } from 'vue-router';
   <LoginGated>
     <nav>
       <RouterLink to="/">Home</RouterLink>
+      <RouterLink to="/questions">Questions</RouterLink>
       <RouterLink to="/upload">Upload</RouterLink>
     </nav>
 

diff --git a/packages/frontend/src/components/ProtectShit.vue b/packages/frontend/src/components/ProtectShit.vue
@@ -7,6 +7,7 @@ import { ZeroAddress } from 'ethers';
 import { associateTaskResults } from '../taskresult';
 import QuestionField from './QuestionField.vue'
 import { evaluatePrompt } from '../llm';
+import { getQuestion } from '../qlist';
 
 const isWorking = ref(false);
 const isSuccess = ref(false);
@@ -17,6 +18,7 @@ const dpcResult = ref<ProtectedDataWithSecretProps>();
 
 const { dataProtectorWallet, dataProtectorCore, dataProtectorSharing } = useIExec();
 
+/*
 const question = [
     ['', 'prompt', 'I am medical AI, here are my questions'],
     ['Please fill out this health questions', 'info'],
@@ -27,23 +29,53 @@ const question = [
     ['Please describe your problem', 'string'],
     ['', 'prompt', 'Please provide a brief response']
 ] as const;
+*/
 
-const isFormError = ref(false);
-const formErrorFields = ref<string[]>([]);
+const questionnaire = ref<any>();
+
+// TODO: load question from
+const {id} = defineProps({
+    id: String
+});
+
+const qid = Number(id);
+
+console.log('QID IS', id);
 
 const qv:string[] = [];
-for( const _ in question ) {
-    qv.push('');
+
+async function loadQuestion() {
+    const dpw = toValue(dataProtectorWallet);
+    if( ! dpw ) {
+        throw new Error('No DPW!');
+    }
+    if( ! id ) {
+        throw new Error('No qid!');
+    }
+    const x = questionnaire.value = await getQuestion(dpw, qid);
+    for( const _ in x.questions ) {
+        qv.push('');
+    }
+    console.log('Question loaded', x);
 }
 
+loadQuestion();
+
+const isFormError = ref(false);
+const formErrorFields = ref<string[]>([]);
+
 /// Checks if the questions have been answered
 const areAnswersValid = computed(()=> {
     let isValid = true;
     formErrorFields.value = [];
     const errors = [];
-    for( const i in question ) {
-        const q = question[i];
-        const v = qv[i];
+    const x = toValue(questionnaire);
+    if( ! x ) {
+        return {isValid:false,errors:[]};
+    }
+    for( const i in x[2] ) {
+        const q = x.questions[i];
+        const v = qv[i as unknown as number];
         const qt = q[1];
         if( qt === 'prompt' || qt === 'info' ) {
             continue;
@@ -56,21 +88,30 @@ const areAnswersValid = computed(()=> {
     return {isValid, errors};
 });
 
-const isButtonDisabled = computed(() =>
-    dataProtectorCore.value === undefined || toValue(isWorking) || ! toValue(areAnswersValid).isValid);
+const isButtonDisabled = computed(() => {
+    const hasDataProtectorCore = toValue(dataProtectorCore) !== undefined;
+    //const areAnswersValidEquals = toValue(areAnswersValid).isValid;
+    const isDisabled = !hasDataProtectorCore || toValue(isWorking); // || ! areAnswersValidEquals);
+    return isDisabled;
+});
 
 function validateQuestions() {
     const {isValid,errors} = toValue(areAnswersValid);
     formErrorFields.value = errors;
     isFormError.value = isValid === false;
+    console.log('isVaid', isValid);
     return isValid;
 }
 
 /// Converts questions & answers into a prompt for the LLM
 function makePrompt() {
     const lines = [];
-    for( const i in question ) {
-        const q = question[i];
+    const x = toValue(questionnaire);
+    if( ! x ) {
+        throw new Error('No questionnaire!');
+    }
+    for( const i in x[2] ) {
+        const q = x[2][i];
         const qt = q[1];
         if( qt === 'info' ) {
             continue;
@@ -81,7 +122,7 @@ function makePrompt() {
             lines.push('');
             continue;
         }
-        const v = qv[i];
+        const v = qv[i as unknown as number];
         lines.push(` * ${q[0]}: ${v}`);
     }
     const llm_input = lines.join("\n");
@@ -200,34 +241,33 @@ async function doProtectData () {
 
 <template>
     <hr />
-  <h1>Protect Yo Data</h1>
+    <div v-if="toValue(questionnaire) !== undefined">
+        <h1>{{questionnaire[1]}}</h1>
 
-  <div class="card">
+        <div v-for="(q, index) of questionnaire![2]">
+            <QuestionField :ref="`q${index}`" v-model:model-value="qv[index]" :q="q"></QuestionField>
+        </div>
 
-    <div v-for="(q, index) of question">
-        <QuestionField :ref="`q${index}`" v-model:model-value="qv[index]" :q="q"></QuestionField>
-    </div>
+        <div v-if="isFormError">
+            Form validation errors:
+            <ul>
+                <li v-for="x of formErrorFields">{{ x }}</li>
+            </ul>
+        </div>
 
-    <div v-if="isFormError">
-        Form validation errors:
-        <ul>
-            <li v-for="x of formErrorFields">{{ x }}</li>
-        </ul>
-    </div>
+        <button type="button" :disabled="toValue(isButtonDisabled)" @click="doProtectData()">
+            Do Everything
+        </button>
+        <br />
 
-    <button type="button" :disabled="toValue(isButtonDisabled)" @click="doProtectData()">
-        Do Everything
-    </button>
-    <br />
-
-    <input type="text" :hidden="!isWorking" ref="dpcStatus" readonly v-model="dpcStatusText" />
-    <input type="text" :hidden="toValue(dpcErrorText).length == 0" ref="dpcError" readonly v-model="dpcErrorText" />
-    <div v-if="isSuccess">
-        <h3>Success!</h3>
-        Address: {{ dpcResult?.address }}<br />
-        Tx: <a :href="`${iExecChain.explorerUrl}/tx/${dpcResult?.transactionHash}`">{{ dpcResult?.transactionHash }}</a><br />
+        <input type="text" :hidden="!isWorking" ref="dpcStatus" readonly v-model="dpcStatusText" />
+        <input type="text" :hidden="toValue(dpcErrorText).length == 0" ref="dpcError" readonly v-model="dpcErrorText" />
+        <div v-if="isSuccess">
+            <h3>Success!</h3>
+            Address: {{ dpcResult?.address }}<br />
+            Tx: <a :href="`${iExecChain.explorerUrl}/tx/${dpcResult?.transactionHash}`">{{ dpcResult?.transactionHash }}</a><br />
+        </div>
     </div>
-  </div>
   <hr />
 </template>
 

diff --git a/packages/frontend/src/components/QList.vue b/packages/frontend/src/components/QList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref, toValue } from 'vue';
+import { getTitles } from '../qlist';
+import { ethersBrowserProvider } from '../wallet';
+const ebp = toValue(ethersBrowserProvider)!;
+const titles = ref<string[]>([]);
+async function refreshData() {
+    const t = await getTitles(ebp);
+    titles.value = t;
+}
+refreshData();
+</script>
+
+<template>
+    <h1>Choose a Quiz</h1>
+    <router-link class="q" :to="{name:'q', params:{id:qid}}" v-for="(t,qid) of titles">
+        {{t}}
+    </router-link>
+</template>
+
+<style scoped>
+a.q {
+  padding: 10px;
+  margin: 5px;
+  border: 1px solid #333;
+}
+</style>
diff --git a/packages/frontend/src/components/QuestionField.vue b/packages/frontend/src/components/QuestionField.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { randomBytes } from '@noble/hashes/utils';
 import { hexlify } from 'ethers';
+import { Question } from '../qlist';
 
 //defineProps(['modelValue']);
 const {q} = defineProps<{
@@ -15,30 +16,37 @@ const emit = defineEmits<{
 function updateValue (value:string) {
   emit('update:modelValue', value)
 };
-
+/*
 type InfoQ = readonly [string, 'info']
 type PromptQ = readonly ['', 'prompt', string];  // Ignored
 type NumberRangeQ = readonly [string, 'range', readonly [number,number]];
 type SelectQ = readonly [string, 'select', readonly string[]];
 type NumberQ = readonly [string, 'number'];
 type StringQ = readonly [string, 'string'];
 type Question = PromptQ | NumberRangeQ | SelectQ | StringQ | NumberQ | InfoQ;
+*/
+
 if( q === undefined ) {
     throw new Error('Unknown question type!');
 }
 const randomId = hexlify(randomBytes(8));
-const [desc, qtype, ...extra] = q;
+
+const title = q[0];
+const qtype = q[1];
+const options = q[2] !== undefined ? (q[2][0] === '[' ? JSON.parse(q[2] as string) : q[2]) : '';
+
+console.log('title', title, 'qtype', qtype, 'options', typeof options, options);
 
 const range:number[] = [];
-if( qtype == 'range' ) {
-    for( let i = q[2][0]; i <= q[2][1]; i++ ) {
+if( qtype == 'range' && options ) {
+    for( let i = Number(options[0]); i <= Number(options![1]); i++ ) {
         range.push(i);
     }
 }
 </script>
 
 <template>
-    <label v-if="qtype!='info'"  :for="randomId">{{ desc }}</label>
+    <label v-if="qtype!='info'" :for="randomId">{{ title }}</label>
     <div v-if="qtype=='number'">
         <input :disabled="disabled" type="text" size="3" :id="randomId" :value="modelValue" @input="updateValue(($event.target as HTMLInputElement).value)" />
     </div>
@@ -51,13 +59,13 @@ if( qtype == 'range' ) {
     <div v-else-if="qtype=='select'">
         <select :disabled="disabled" :id="randomId" @change="updateValue(($event.target as HTMLSelectElement).value)">
             <option value=""></option>
-            <option v-for="x of extra[0]" :value="x">{{ x }}</option>
+            <option v-for="x of options" :value="x">{{ x }}</option>
         </select>
     </div>
     <div v-else-if="qtype=='string'"  @input="updateValue(($event.target as HTMLInputElement).value)" >
         <input :disabled="disabled" type="text" :value="modelValue" :id="randomId" />
     </div>
     <div v-else-if="qtype=='info'">
-        <p>{{ desc }}</p>
+        <p>{{ title }}</p>
     </div>
 </template>
diff --git a/packages/frontend/src/main.ts b/packages/frontend/src/main.ts
@@ -4,10 +4,13 @@ import App from './App.vue'
 import ProtectShit from './components/ProtectShit.vue'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
+import QList from './components/QList.vue'
 
 const routes = [
     {path:'/', component:HelloWorld},
-    {path:'/upload', component:ProtectShit}
+    {path:'/upload', component:ProtectShit},
+    {path:'/questions', component:QList},
+    {path:'/q/:id', component:ProtectShit, name: 'q', props: true}
 ] as Readonly<RouteRecordRaw[]>;
 
 const router = createRouter({