diff --git a/package.json b/package.json
index ee9648b3435c4332e232b747ec5d9abdf8725424..2ab1230ad2415791508c06a9346d430a25bd65e6 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "aonweb": "^2.0.2",
     "guess": "^1.0.2",
+    "vant": "^4.9.5",
     "vue": "^3.2.37"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 51d1f2b4e062e9725f8fd5e3ef6909eaffa110f5..9aa43bcf5821446ea20642bbf4fd448da6e66b76 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,40 +1,234 @@
 <template>
   <div id="app">
-    <SearchPage v-if="currentPage === 'search'" @search="handleSearch" />
-    <ResultsPage v-else :searchQuery="searchQuery" @back="goToSearch" />
+    <h1>User Account Information</h1>
+
+    <div v-if="loadingAccount">Loading account information, please wait...</div>
+    <div v-else>
+      <p v-if="account">Account: {{ account }}</p>
+      <p v-if="points !== null">Remaining Points: {{ points }}</p>
+    </div>
+
+    <div v-if="error">{{ error }}</div>
+
+    <h1>Whisper API - Automatic Speech Recognition</h1>
+
+    <!-- 添加文件上传输入框 -->
+    <input type="file" id="fileInput" @change="handleFileChange" accept="audio/*" />
+
+    <!-- 上传按钮 -->
+    <button type="button" @click="handleFileUpload" :disabled="!selectedFile">Upload Audio</button>
+
+    <form @submit.prevent="performASR">
+      <div>
+        <label for="awv">Audio URL:</label>
+        <input v-model="inputData.audio" type="text" id="awv" placeholder="Enter audio file URL" required readonly>
+      </div>
+      <div>
+        <label for="model">Model:</label>
+        <input v-model="inputData.model" type="text" id="model" placeholder="Enter model" required>
+      </div>
+      <div>
+        <label for="translate">Translate:</label>
+        <input type="checkbox" v-model="inputData.translate" id="translate">
+      </div>
+      <div>
+        <label for="temperature">Temperature:</label>
+        <input v-model.number="inputData.temperature" type="number" id="temperature" required>
+      </div>
+      <button type="button" @click="performASR" :disabled="!inputData.audio">Perform ASR</button>
+    </form>
+
+    <div v-if="loading">Processing audio, please wait...</div>
+    <div v-if="error">{{ error }}</div>
+    <div v-if="recognizedText">
+      <h2>Recognized Text:</h2>
+      <p>{{ recognizedText }}</p>
+    </div>
+
+    <!-- 显示上传后的 JSON 数据 -->
+    <div v-if="uploadResponse">
+      <h2>Upload Response:</h2>
+      <pre>{{ uploadResponse }}</pre>
+    </div>
+
+    <!-- 显示 Perform ASR 返回的 JSON 数据 -->
+    <div v-if="asrResponse">
+      <h2>ASR Response:</h2>
+      <pre>{{ asrResponse }}</pre>
+    </div>
   </div>
 </template>
 
 <script>
-import SearchPage from './components/SearchPage.vue';
-import ResultsPage from './components/ResultsPage.vue';
+import { AI, AIOptions, User, detectEthereumProvider } from 'aonweb';
+import { showToast, showLoadingToast, closeToast } from 'vant';
 
 export default {
-  name: 'App',
-  components: {
-    SearchPage,
-    ResultsPage
-  },
   data() {
     return {
-      currentPage: 'search',
-      searchQuery: ''
+      account: null,
+      points: null,
+      loadingAccount: false,
+      inputData: {
+        audio: '', // 自动填充上传后的音频URL
+        model: 'large-v3',
+        translate: false,
+        temperature: 0,
+        transcription: 'plain text',
+        suppress_tokens: '-1',
+        logprob_threshold: -1,
+        no_speech_threshold: 0.6,
+        condition_on_previous_text: true,
+        compression_ratio_threshold: 2.4,
+        temperature_increment_on_fallback: 0.2
+      },
+      selectedFile: null, // 用于保存选择的文件
+      recognizedText: null,
+      loading: false,
+      error: null,
+      uploadResponse: null, // 用于保存上传后的JSON响应
+      asrResponse: null, // 用于保存ASR返回的JSON响应
     };
   },
   methods: {
-    handleSearch(query) {
-      this.searchQuery = query;
-      this.currentPage = 'results';
+    async getAccount() {
+      this.loadingAccount = true;
+      this.error = null;
+
+      try {
+        let user = new User();
+        const isLoginStatus = await user.islogin();
+        console.log(isLoginStatus, 'isLoginStatus');
+
+        if (!isLoginStatus) {
+          showLoadingToast({
+            duration: 0,
+            forbidClick: true,
+            message: 'Loading...',
+          });
+
+          user.login(async (acc, userId, error) => {
+            closeToast();
+            if (error) {
+              this.error = `Login error: ${error.message || error}`;
+              return;
+            }
+
+            this.account = acc;
+            bus.emit('get_balance', "login");
+            await this.getBalance(); // 获取剩余积分
+          });
+        } else {
+          this.account = await user.getAccount();
+          console.log("getWeb3 account", this.account);
+          let userId = await user.getUserId();
+          console.log("getWeb3 userId", userId);
+
+          bus.emit('get_balance', "login");
+          await this.getBalance(); // 获取剩余积分
+        }
+      } catch (error) {
+        this.error = `Error retrieving account: ${error.message || error}`;
+      } finally {
+        this.loadingAccount = false;
+      }
+    },
+    async getBalance() {
+      try {
+        let user = new User();
+        this.points = await user.getPoints();
+      } catch (error) {
+        this.error = `Error retrieving points: ${error.message || error}`;
+      }
+    },
+    handleFileChange(event) {
+      this.selectedFile = event.target.files[0];
+      if (this.selectedFile.size > 30 * 1024 * 1024) {
+        this.onOversize(this.selectedFile);
+      }
     },
-    goToSearch() {
-      this.currentPage = 'search';
-    }
+    handleFileUpload() {
+      if (this.selectedFile) {
+        this.afterRead({ file: this.selectedFile });
+      }
+    },
+    onOversize(file) {
+      alert('The file size cannot exceed 30MB');
+    },
+    async afterRead(file) {
+      const formData = new FormData();
+      formData.append('file', file.file);
+
+      try {
+        const res = await this.uploadFile(formData);
+        this.uploadResponse = res; // 保存上传后的JSON响应
+        if (res.code === 200 && res.data) {
+          this.inputData.audio = res.data; // 将返回的 data 字段的值填充到 audio URL 的输入框中
+        }
+      } catch (err) {
+        alert('Audio upload failed');
+        console.log(err);
+      }
+    },
+    async uploadFile(formData) {
+      const response = await fetch('https://tmp-file.aigic.ai/api/v1/upload?expires=1800&type=audio/mp3', {
+        method: 'POST',
+        body: formData
+      });
+      const data = await response.json();
+      return data;
+    },
+    async performASR() {
+      this.loading = true;
+      this.error = null;
+      this.recognizedText = null;
+
+      const aiOptions = new AIOptions({
+        appId: '1pJL7vKQKgU33yqmo6ACfFAh.CoI1HkbwcujTEe.pt0A',
+        dev_mode: true
+      });
+
+      const aonweb = new AI(aiOptions);
+
+      try {
+        const price = 8;
+        const response = await aonweb.prediction("/predictions/ai/whisper", { input: this.inputData }, price);
+        this.asrResponse = response; // 保存 ASR 返回的 JSON 响应
+        this.recognizedText = response.data.result; // 假设返回的识别结果在 `result` 字段中
+      } catch (err) {
+        this.error = 'Error performing ASR: ' + err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  mounted() {
+    this.getAccount();
   }
 };
 </script>
 
-<style>
+<style scoped>
 #app {
-  font-family: Arial, sans-serif;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  margin-top: 60px;
+}
+
+form div {
+  margin-bottom: 20px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #42b983;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #369b74;
 }
-</style>
\ No newline at end of file
+</style>