将逻辑改成 Konabot 可以使用的版本

src/routes/makequote/+page.svelte

@@ -1,35 +1,15 @@
 <script lang="ts">
-  import type { ChangeEventHandler } from "svelte/elements"
+  let image_url: string = "";
-
+  let quote: string = "挂科比不挂科南";
-  let imagePreviewUrl: string | undefined = undefined
+  let author: string = "宿舍";
-  let quote: string = '挂科比不挂科南'
-  let author: string = '宿舍'
-
-  const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const files = (event.target!! as HTMLInputElement).files
-    if (files && files.length == 1) {
-      const file = files[0]
-      imagePreviewUrl = URL.createObjectURL(file)
-    } else {
-      imagePreviewUrl = undefined
-    }
-  }
 </script>
 
 <header>
   <h1 class="text-2xl font-bold">Makequote</h1>
   <p>一个生成奇奇怪怪的名人名言句子的服务</p>
   <p>
-    <label for="image">选择文件：</label>
+    <label for="image">图片：</label>
-    <input
+    <input type="text" id="image" name="image" bind:value={image_url} />
-      type="file"
-      id="image"
-      name="image"
-      accept="image/*"
-      class="border cursor-pointer shadow"
-      required
-      on:change={handleFileChange}
-    />
   </p>
   <p>
     <label for="quote">名言：</label>
@@ -41,17 +21,30 @@
   </p>
 </header>
 
-<div id="main" class="w-240 h-135 relative bg-green-400 m-20 shadow text-white" style="font-family: 'Noto Sans CJK SC';">
+<div
-  {#if imagePreviewUrl}
+  id="main"
-    <div class="absolute left-0 top-0 h-full w-130 bg-center bg-cover grayscale" style:background-image={`url(${imagePreviewUrl})`}></div>
+  class="w-240 h-135 relative bg-green-400 m-20 shadow text-white"
+  style="font-family: 'Noto Sans CJK SC';"
+>
+  {#if image_url}
+    <div
+      class="absolute left-0 top-0 h-full w-130 bg-center bg-cover grayscale"
+      style:background-image={`url(${image_url})`}
+    ></div>
   {/if}
-  <div class="absolute right-0 top-0 h-full w-180" style="background: linear-gradient(0.25turn, #00000000, #000000 38.89%)">
+  <div
-    <div class="box-border ml-70 w-110 h-full flex justify-center items-center px-10">
+    class="absolute right-0 top-0 h-full w-180"
+    style="background: linear-gradient(0.25turn, #00000000, #000000 38.89%)"
+  >
+    <div
+      class="box-border ml-70 w-110 h-full flex justify-center items-center px-10"
+    >
       <div class="w-full">
-        <h1 class="text-center text-4xl font-bold my-5 wrap-break-word">{quote}</h1>
+        <h1 class="text-center text-4xl font-bold my-5 wrap-break-word">
+          {quote}
+        </h1>
         <p class="text-right">– {author}</p>
       </div>
     </div>
   </div>
 </div>
-