try fix client

package-lock.json

@@ -8,6 +8,7 @@
       "name": "svelte",
       "version": "0.0.0",
       "dependencies": {
+        "@gradio/client": "^1.15.6",
         "@imgly/background-removal": "^1.7.0",
         "dexie": "^4.0.11"
       },
@@ -39,6 +40,34 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@bundled-es-modules/cookie": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz",
+      "integrity": "sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==",
+      "license": "ISC",
+      "dependencies": {
+        "cookie": "^0.7.2"
+      }
+    },
+    "node_modules/@bundled-es-modules/statuses": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/statuses/-/statuses-1.0.1.tgz",
+      "integrity": "sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==",
+      "license": "ISC",
+      "dependencies": {
+        "statuses": "^2.0.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/tough-cookie": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/tough-cookie/-/tough-cookie-0.1.6.tgz",
+      "integrity": "sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==",
+      "license": "ISC",
+      "dependencies": {
+        "@types/tough-cookie": "^4.0.5",
+        "tough-cookie": "^4.1.4"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.6",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.6.tgz",
@@ -481,6 +510,26 @@
         "node": ">=18"
       }
     },
+    "node_modules/@gradio/client": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/@gradio/client/-/client-1.15.6.tgz",
+      "integrity": "sha512-QDUj2uubhp8emy7vSF/27Pn7X/tTiI2kOIL4ymiqClw9ps3DMZnsmUgKg0JSQ0w/ir71kWV0zcmJLtsy2E+KKw==",
+      "license": "ISC",
+      "dependencies": {
+        "@types/eventsource": "^1.1.15",
+        "bufferutil": "^4.0.7",
+        "eventsource": "^2.0.2",
+        "fetch-event-stream": "^0.1.5",
+        "msw": "^2.2.1",
+        "semiver": "^1.1.0",
+        "textlinestream": "^1.1.1",
+        "typescript": "^5.0.0",
+        "ws": "^8.13.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@imgly/background-removal": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@imgly/background-removal/-/background-removal-1.7.0.tgz",
@@ -495,6 +544,80 @@
         "onnxruntime-web": "1.21.0"
       }
     },
+    "node_modules/@inquirer/confirm": {
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.14.tgz",
+      "integrity": "sha512-5yR4IBfe0kXe59r1YCTG8WXkUbl7Z35HK87Sw+WUyGD8wNUx7JvY7laahzeytyE1oLn74bQnL7hstctQxisQ8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.1.15",
+        "@inquirer/type": "^3.0.8"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@inquirer/core": {
+      "version": "10.1.15",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.15.tgz",
+      "integrity": "sha512-8xrp836RZvKkpNbVvgWUlxjT4CraKk2q+I3Ksy+seI2zkcE+y6wNs1BVhgcv8VyImFecUhdQrYLdW32pAjwBdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/figures": "^1.0.13",
+        "@inquirer/type": "^3.0.8",
+        "ansi-escapes": "^4.3.2",
+        "cli-width": "^4.1.0",
+        "mute-stream": "^2.0.0",
+        "signal-exit": "^4.1.0",
+        "wrap-ansi": "^6.2.0",
+        "yoctocolors-cjs": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@inquirer/figures": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.13.tgz",
+      "integrity": "sha512-lGPVU3yO9ZNqA7vTYz26jny41lE7yoQansmqdMLBEfqaGsmdg7V3W9mK9Pvb5IL4EVZ9GnSDGMO/cJXud5dMaw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/type": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.8.tgz",
+      "integrity": "sha512-lg9Whz8onIHRthWaN1Q9EGLa/0LFJjyM8mEUbL1eTi6yMGvBf8gvyDLtxSXztQsxMvhxxNpJYrwa1YHdq+w4Jw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.12",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
@@ -534,6 +657,45 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mswjs/interceptors": {
+      "version": "0.39.3",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.39.3.tgz",
+      "integrity": "sha512-9bw/wBL7pblsnOCIqvn1788S9o4h+cC5HWXg0Xhh0dOzsZ53IyfmBM+FYqpDDPbm0xjCqEqvCITloF3Dm4TXRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@open-draft/deferred-promise": "^2.2.0",
+        "@open-draft/logger": "^0.3.0",
+        "@open-draft/until": "^2.0.0",
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.3",
+        "strict-event-emitter": "^0.5.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@open-draft/deferred-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
+      "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
+      "license": "MIT"
+    },
+    "node_modules/@open-draft/logger": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/logger/-/logger-0.3.0.tgz",
+      "integrity": "sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.0"
+      }
+    },
+    "node_modules/@open-draft/until": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz",
+      "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==",
+      "license": "MIT"
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -962,6 +1124,12 @@
         "@types/deep-eql": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/deep-eql": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -976,6 +1144,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/eventsource": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@types/eventsource/-/eventsource-1.1.15.tgz",
+      "integrity": "sha512-XQmGcbnxUNa06HR3VBVkc9+A2Vpi9ZyLJcdS5dwaQQ/4ZMWFO+5c90FnMUpbtMZwB/FChoYHwuVg8TvkECacTA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.0.14",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.14.tgz",
@@ -985,6 +1159,18 @@
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@types/statuses": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.6.tgz",
+      "integrity": "sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "license": "MIT"
+    },
     "node_modules/@types/whatwg-mimetype": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
@@ -1142,6 +1328,57 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -1172,6 +1409,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.9.tgz",
+      "integrity": "sha512-WDtdLmJvAuNNPzByAYpRo2rF1Mmradw6gvWsQKf63476DDXmomT9zUiGypLcG4ibIM67vhAj8jJRdbmEws2Aqw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -1225,6 +1475,46 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/cli-width": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
+      "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1235,6 +1525,33 @@
         "node": ">=6"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -1279,6 +1596,12 @@
       "integrity": "sha512-SOKO002EqlvBYYKQSew3iymBoN2EQ4BDw/3yprjh7kAfFzjBYkaMNa/pZvcA7HSWlcKSQb9XhPe3wKyQ0x4A8A==",
       "license": "Apache-2.0"
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/es-module-lexer": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
@@ -1328,6 +1651,15 @@
         "@esbuild/win32-x64": "0.25.6"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/esm-env": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
@@ -1355,6 +1687,15 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/expect-type": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.2.2.tgz",
@@ -1390,6 +1731,12 @@
         }
       }
     },
+    "node_modules/fetch-event-stream": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/fetch-event-stream/-/fetch-event-stream-0.1.5.tgz",
+      "integrity": "sha512-V1PWovkspxQfssq/NnxoEyQo1DV+MRK/laPuPblIZmSjMN8P5u46OhlFQznSr9p/t0Sp8Uc6SbM3yCMfr0KU8g==",
+      "license": "MIT"
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -1426,6 +1773,24 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/graphql": {
+      "version": "16.11.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.11.0.tgz",
+      "integrity": "sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+      }
+    },
     "node_modules/guid-typescript": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/guid-typescript/-/guid-typescript-1.0.9.tgz",
@@ -1465,6 +1830,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/headers-polyfill": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz",
+      "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==",
+      "license": "MIT"
+    },
     "node_modules/iota-array": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz",
@@ -1477,6 +1848,21 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "license": "MIT"
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-node-process": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz",
+      "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==",
+      "license": "MIT"
+    },
     "node_modules/is-reference": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
@@ -1568,6 +1954,59 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/msw": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.10.4.tgz",
+      "integrity": "sha512-6R1or/qyele7q3RyPwNuvc0IxO8L8/Aim6Sz5ncXEgcWUNxSKE+udriTOWHtpMwmfkLYlacA2y7TIx4cL5lgHA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bundled-es-modules/cookie": "^2.0.1",
+        "@bundled-es-modules/statuses": "^1.0.1",
+        "@bundled-es-modules/tough-cookie": "^0.1.6",
+        "@inquirer/confirm": "^5.0.0",
+        "@mswjs/interceptors": "^0.39.1",
+        "@open-draft/deferred-promise": "^2.2.0",
+        "@open-draft/until": "^2.1.0",
+        "@types/cookie": "^0.6.0",
+        "@types/statuses": "^2.0.4",
+        "graphql": "^16.8.1",
+        "headers-polyfill": "^4.0.2",
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.3",
+        "path-to-regexp": "^6.3.0",
+        "picocolors": "^1.1.1",
+        "strict-event-emitter": "^0.5.1",
+        "type-fest": "^4.26.1",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "msw": "cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mswjs"
+      },
+      "peerDependencies": {
+        "typescript": ">= 4.8.x"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/mute-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz",
+      "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1597,6 +2036,17 @@
         "is-buffer": "^1.0.2"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/onnxruntime-common": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.21.0.tgz",
@@ -1619,6 +2069,18 @@
         "protobufjs": "^7.2.4"
       }
     },
+    "node_modules/outvariant": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz",
+      "integrity": "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==",
+      "license": "MIT"
+    },
+    "node_modules/path-to-regexp": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+      "license": "MIT"
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -1640,7 +2102,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -1717,6 +2178,33 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/psl": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/lupomontero"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -1731,6 +2219,21 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.45.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.45.1.tgz",
@@ -1784,6 +2287,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/semiver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
+      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@@ -1791,6 +2303,18 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/sirv": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
@@ -1823,6 +2347,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/std-env": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
@@ -1830,6 +2363,38 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/strict-event-emitter": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz",
+      "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==",
+      "license": "MIT"
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-literal": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
@@ -1893,6 +2458,12 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/textlinestream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/textlinestream/-/textlinestream-1.1.1.tgz",
+      "integrity": "sha512-iBHbi7BQxrFmwZUQJsT0SjNzlLLsXhvW/kg7EyOMVMBIrlnj/qYofwo1LVLZi+3GbUEo96Iu2eqToI2+lZoAEQ==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -1964,11 +2535,37 @@
         "node": ">=6"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -1984,6 +2581,25 @@
       "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
       "license": "MIT"
     },
+    "node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -2202,6 +2818,89 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yoctocolors-cjs": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz",
+      "integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zimmerframe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",

package.json

@@ -25,6 +25,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@gradio/client": "^1.15.6",
     "@imgly/background-removal": "^1.7.0",
     "dexie": "^4.0.11"
   }

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -318,8 +318,8 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
     const objectMatch = state.monsterConcept.match(/# Object Caption\s*\n([\s\S]*?)(?=^# )/m);
     const objectDescription = objectMatch ? objectMatch[1].trim() : '';
     
-    // Extract monster name - now it's the second heading after Object Caption
-    const monsterNameMatch = state.monsterConcept.match(/^# (?!Object Caption)(.+)$/m);
+    // Extract monster name from the Monster Name section - similar to object extraction
+    const monsterNameMatch = state.monsterConcept.match(/# Monster Name\s*\n([\s\S]*?)(?=^## |$)/m);
     const monsterName = monsterNameMatch ? monsterNameMatch[1].trim() : 'Unknown Monster';
     
     // Debug logging

src/lib/components/MonsterGenerator/MonsterResult.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import type { MonsterWorkflowState } from '$lib/types';
+  import type { PicletInstance } from '$lib/db/schema';
   import { saveMonster } from '$lib/db/monsters';
   import { TYPE_DATA, PicletType } from '$lib/types/picletTypes';
+  import { monsterToPicletInstance } from '$lib/db/piclets';
+  import PicletCard from '../Piclets/PicletCard.svelte';
+  import PicletDetail from '../Piclets/PicletDetail.svelte';
   
   interface Props {
     workflowState: MonsterWorkflowState;
@@ -11,407 +15,162 @@
   let { workflowState, onReset }: Props = $props();
   let isSaving = $state(false);
   let isSaved = $state(false);
+  let picletInstance: PicletInstance | null = $state(null);
+  let showDetailView = $state(false);
   let saveError: string | null = $state(null);
-  
-  function downloadImage() {
-    if (!workflowState.monsterImage) return;
-    
-    const link = document.createElement('a');
-    // Use transparent image if available, otherwise original
-    link.href = workflowState.monsterImage.imageData || workflowState.monsterImage.imageUrl;
-    link.download = `monster-${Date.now()}.png`;
-    link.click();
-  }
-  
-  function copyPrompt() {
-    if (!workflowState.imagePrompt) return;
-    navigator.clipboard.writeText(workflowState.imagePrompt);
-    alert('Prompt copied to clipboard!');
-  }
-  
-  function getStatColor(value: number): string {
-    if (value >= 80) return '#007bff'; // very high - blue
-    if (value >= 60) return '#28a745'; // high - green
-    if (value >= 40) return '#ffc107'; // medium - yellow
-    if (value >= 20) return '#fd7e14'; // low - orange
-    return '#dc3545'; // very low - red
-  }
-  
-  async function saveToCollection() {
-    if (!workflowState.monsterImage || !workflowState.imageCaption || !workflowState.monsterConcept || !workflowState.imagePrompt || !workflowState.monsterStats) {
-      saveError = 'Missing monster data';
-      return;
-    }
-    
-    isSaving = true;
-    saveError = null;
-    
-    try {
-      // Extract monster name from concept (usually first line or after "Monster Name:")
-      let monsterName = 'Unknown Monster';
-      const conceptLines = workflowState.monsterConcept.split('\n');
-      for (const line of conceptLines) {
-        if (line.includes('Monster Name:') || line.includes('**Monster Name:**')) {
-          monsterName = line.replace(/\*\*Monster Name:\*\*|Monster Name:/g, '').trim();
-          break;
-        } else if (line.trim() && !line.includes(':')) {
-          // First non-empty line without colon might be the name
-          monsterName = line.trim();
-          break;
-        }
-      }
-      
-      // Use stats name if available, otherwise use extracted name
-      if (workflowState.monsterStats?.name) {
-        monsterName = workflowState.monsterStats.name;
+
+  // Create piclet instance from the monster data
+  $effect(() => {
+    if (workflowState.monsterImage && workflowState.monsterConcept && workflowState.monsterStats) {
+      try {
+        const monster = {
+          name: workflowState.monsterStats.name || 'Unknown Monster',
+          imageUrl: workflowState.monsterImage.imageUrl,
+          imageData: workflowState.monsterImage.imageData,
+          imageCaption: workflowState.imageCaption || '',
+          concept: workflowState.monsterConcept,
+          imagePrompt: workflowState.imagePrompt || '',
+          stats: workflowState.monsterStats
+        };
+        
+        picletInstance = monsterToPicletInstance(monster);
+      } catch (error) {
+        console.error('Failed to create piclet instance:', error);
       }
-      
-      const monsterData = {
-        name: monsterName,
-        imageUrl: workflowState.monsterImage.imageUrl,
-        imageData: workflowState.monsterImage.imageData,
-        imageCaption: workflowState.imageCaption,
-        concept: workflowState.monsterConcept,
-        imagePrompt: workflowState.imagePrompt,
-        stats: workflowState.monsterStats
-      };
-      
-      console.log('Saving monster with data:', {
-        ...monsterData,
-        imageData: monsterData.imageData ? `${monsterData.imageData.substring(0, 50)}... (length: ${monsterData.imageData.length})` : 'null'
-      });
-      
-      await saveMonster(monsterData);
-      
-      isSaved = true;
-    } catch (err) {
-      console.error('Failed to save monster:', err);
-      saveError = 'Failed to save monster to collection';
-    } finally {
-      isSaving = false;
     }
+  });
+
+  function handleCardClick() {
+    if (picletInstance) {
+      showDetailView = true;
+    }
+  }
+
+  function handleCloseDetail() {
+    showDetailView = false;
   }
 </script>
 
-<div class="result-container">
-  <h3>{workflowState.monsterStats?.name || 'Your Monster Has Been Created!'}</h3>
-  <p class="saved-message">✓ Automatically saved to your collection</p>
-  
-  {#if workflowState.monsterImage}
-    <div class="monster-image-container">
-      <img 
-        src={workflowState.monsterImage.imageData || workflowState.monsterImage.imageUrl} 
-        alt="Generated Monster" 
-        class="monster-image"
-      />
+{#if showDetailView && picletInstance}
+  <PicletDetail 
+    instance={picletInstance}
+    onClose={handleCloseDetail}
+  />
+{:else}
+  <div class="result-container">
+    <div class="success-header">
+      <div class="success-icon">✨</div>
+      <h2>Success!</h2>
+      <p class="success-message">
+        You can now encounter <strong>{picletInstance?.nickname || 'this creature'}</strong>!
+      </p>
     </div>
-  {/if}
-  
-  {#if workflowState.monsterStats?.description}
-    <p class="monster-description">{workflowState.monsterStats.description}</p>
-  {/if}
     
-  {#if workflowState.monsterStats}
-      <div class="result-section">
-        <h4>Battle Stats</h4>
-        <div class="stats-grid">
-          <div class="stat-item">
-            <div class="tier-badge {workflowState.monsterStats.tier}">{workflowState.monsterStats.tier.toUpperCase()}</div>
-            <span class="stat-label">Tier</span>
-          </div>
-          {#if (workflowState.monsterStats as any).picletType}
-            <div class="stat-item">
-              <TypeBadge type={(workflowState.monsterStats as any).picletType as PicletType} showLabel={true} size="medium" />
-              <span class="stat-label">Type</span>
-            </div>
-          {/if}
-          <div class="stat-item">
-            <div class="stat-bar" style="width: {workflowState.monsterStats.HP}%; background-color: {getStatColor(workflowState.monsterStats.HP)}20"></div>
-            <span class="stat-label">HP</span>
-            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.HP)}">{workflowState.monsterStats.HP}</span>
-          </div>
-          <div class="stat-item">
-            <div class="stat-bar" style="width: {workflowState.monsterStats.attack}%; background-color: {getStatColor(workflowState.monsterStats.attack)}20"></div>
-            <span class="stat-label">Attack</span>
-            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.attack)}">{workflowState.monsterStats.attack}</span>
-          </div>
-          <div class="stat-item">
-            <div class="stat-bar" style="width: {workflowState.monsterStats.defence}%; background-color: {getStatColor(workflowState.monsterStats.defence)}20"></div>
-            <span class="stat-label">Defence</span>
-            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.defence)}">{workflowState.monsterStats.defence}</span>
-          </div>
-          <div class="stat-item">
-            <div class="stat-bar" style="width: {workflowState.monsterStats.speed}%; background-color: {getStatColor(workflowState.monsterStats.speed)}20"></div>
-            <span class="stat-label">Speed</span>
-            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.speed)}">{workflowState.monsterStats.speed}</span>
-          </div>
-        </div>
-        <div class="abilities-section">
-          <div class="ability-item">
-            <h5>Special Passive Trait</h5>
-            <p>{workflowState.monsterStats.specialPassiveTrait}</p>
-          </div>
-          <div class="ability-item">
-            <h5>Attack: {workflowState.monsterStats.attackActionName}</h5>
-            <p>{workflowState.monsterStats.attackActionDescription}</p>
-          </div>
-          <div class="ability-item">
-            <h5>Buff: {workflowState.monsterStats.buffActionName}</h5>
-            <p>{workflowState.monsterStats.buffActionDescription}</p>
-          </div>
-          <div class="ability-item">
-            <h5>Debuff: {workflowState.monsterStats.debuffActionName}</h5>
-            <p>{workflowState.monsterStats.debuffActionDescription}</p>
-          </div>
-          <div class="ability-item">
-            <h5>Ultimate: {workflowState.monsterStats.specialActionName}</h5>
-            <p>{workflowState.monsterStats.specialActionDescription}</p>
-          </div>
-        </div>
+    {#if picletInstance}
+      <div class="piclet-preview">
+        <PicletCard 
+          instance={picletInstance}
+          size={140}
+          onClick={handleCardClick}
+        />
+        <p class="tap-hint">Tap to view details</p>
       </div>
     {/if}
-  
-  <div class="action-buttons">
-    <button class="action-button download" onclick={downloadImage}>
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-        <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
-      </svg>
-      Download Monster
-    </button>
-    <button class="action-button reset" onclick={onReset}>
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-        <path d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.058 7.293a1 1 0 01-1.414 1.414l-2.35-2.35A1 1 0 011 5.648V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.943 13H13a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"/>
-      </svg>
-      Create Another Monster
-    </button>
+    
+    <div class="action-buttons">
+      <button class="action-button primary" onclick={onReset}>
+        Create Another
+      </button>
+    </div>
   </div>
-  
-  {#if saveError}
-    <div class="error-message">{saveError}</div>
-  {/if}
-</div>
+{/if}
 
 <style>
   .result-container {
-    max-width: 900px;
+    max-width: 500px;
     margin: 0 auto;
     padding: 2rem;
-  }
-  
-  h3 {
     text-align: center;
-    color: #333;
-    margin-bottom: 2rem;
   }
   
-  .monster-image-container {
-    text-align: center;
-    margin-bottom: 3rem;
+  .success-header {
+    margin-bottom: 2rem;
   }
   
-  .monster-image {
-    max-width: 100%;
-    max-height: 600px;
-    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  .success-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
   }
   
-  
-  .result-section {
-    background: #f8f9fa;
-    padding: 1.5rem;
-    border-radius: 8px;
-    border: 1px solid #e9ecef;
+  .success-header h2 {
+    color: #333;
+    margin: 0 0 1rem;
+    font-size: 1.8rem;
+    font-weight: 600;
   }
   
-  .result-section h4 {
-    margin: 0 0 1rem 0;
-    color: #495057;
+  .success-message {
+    color: #666;
     font-size: 1.1rem;
+    margin: 0;
   }
   
-  
-  .action-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    flex-wrap: wrap;
+  .success-message strong {
+    color: #333;
+    font-weight: 600;
   }
   
-  .action-button {
+  .piclet-preview {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.8rem 1.5rem;
-    border: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  
-  .action-button.download {
-    background: #28a745;
-    color: white;
-  }
-  
-  .action-button.download:hover {
-    background: #218838;
-  }
-  
-  .action-button.reset {
-    background: #6c757d;
-    color: white;
-  }
-  
-  .action-button.reset:hover {
-    background: #5a6268;
-  }
-  
-  .action-button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  
-  .error-message {
-    margin-top: 1rem;
-    padding: 0.5rem;
-    background: #f8d7da;
-    color: #721c24;
-    border-radius: 4px;
-    text-align: center;
-  }
-  
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-  
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 1rem;
-    margin-bottom: 1.5rem;
-  }
-  
-  .stat-item {
-    display: flex;
-    flex-direction: column;
-    padding: 0.75rem;
-    background: white;
-    border-radius: 6px;
-    border: 1px solid #dee2e6;
-    position: relative;
-    overflow: hidden;
+    margin: 2rem 0;
   }
   
-  .stat-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    transition: width 0.3s ease;
-    z-index: 0;
-  }
-  
-  .stat-label {
-    font-size: 0.85rem;
-    color: #6c757d;
-    margin-bottom: 0.25rem;
-    position: relative;
-    z-index: 1;
+  .tap-hint {
+    color: #888;
+    font-size: 0.9rem;
+    margin: 0;
+    font-style: italic;
   }
   
-  .stat-value {
-    font-weight: 600;
-    font-size: 1.1rem;
-    position: relative;
-    z-index: 1;
+  .action-buttons {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
   }
   
-  .tier-badge {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
+  .action-button {
+    padding: 0.875rem 2rem;
+    border: none;
+    border-radius: 12px;
     font-weight: 600;
     font-size: 1rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  .tier-badge.low {
-    background: #e0e0e0;
-    color: #666;
-  }
-  
-  .tier-badge.medium {
-    background: #81c784;
-    color: white;
-  }
-  
-  .tier-badge.high {
-    background: #64b5f6;
-    color: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-width: 160px;
   }
   
-  .tier-badge.legendary {
-    background: linear-gradient(135deg, #ab47bc, #7b1fa2);
+  .action-button.primary {
+    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
     color: white;
-    box-shadow: 0 2px 4px rgba(123, 31, 162, 0.3);
-  }
-  
-  .abilities-section {
-    display: grid;
-    gap: 1rem;
-  }
-  
-  .ability-item {
-    background: white;
-    padding: 1rem;
-    border-radius: 6px;
-    border: 1px solid #dee2e6;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
   }
   
-  .ability-item h5 {
-    margin: 0 0 0.5rem 0;
-    color: #495057;
-    font-size: 0.95rem;
+  .action-button.primary:hover {
+    background: linear-gradient(135deg, #2563eb, #1e40af);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
   }
   
-  .ability-item p {
-    margin: 0;
-    font-size: 0.85rem;
-    line-height: 1.4;
-  }
-  
-  .saved-message {
-    color: #28a745;
-    font-size: 0.9rem;
-    margin: -0.5rem 0 1.5rem;
-    text-align: center;
-  }
-  
-  .monster-description {
-    text-align: center;
-    color: #555;
-    font-size: 1rem;
-    line-height: 1.5;
-    margin: 1rem auto 2rem;
-    max-width: 600px;
-    font-style: italic;
+  .action-button.primary:active {
+    transform: translateY(0);
   }
   
   @media (max-width: 768px) {
     .result-container {
       padding: 1rem;
     }
-    
-    .action-buttons {
-      flex-direction: column;
-    }
-    
-    .action-button {
-      width: 100%;
-      justify-content: center;
-    }
   }
 </style>

src/lib/components/Piclets/PicletDetail.svelte

@@ -157,7 +157,6 @@
           </div>
         {:else if selectedTab === 'stats'}
           <div class="content-card">
-            <h3 class="section-title">Battle Stats</h3>
             <div class="stats-list">
               <div class="stat-row">
                 <span>Attack</span>

src/lib/services/qwen3Client.ts

@@ -1,6 +1,7 @@
 /**
  * Qwen3 Client - Drop-in replacement for rwkvClient using Qwen3 HF Space
  * Compatible with existing rwkvClient.predict("/chat", [...]) API
+ * Uses proper Gradio Client connection instead of direct HTTP calls
  */
 
 interface Qwen3Message {
@@ -17,11 +18,12 @@ interface Qwen3ClientOptions {
 export class Qwen3Client {
   private options: Qwen3ClientOptions;
   private sessionId: string;
+  private gradioClient: any = null;
 
   constructor(options: Partial<Qwen3ClientOptions> = {}) {
     this.options = {
       huggingFaceSpace: 'Qwen/Qwen3-Demo',
-      model: 'qwen3-32b', // Default to Qwen3-32B for good performance/quality balance
+      model: 'qwen2.5-72b-instruct', // Use Qwen2.5-72B for best performance
       ...options
     };
     this.sessionId = this.generateSessionId();
@@ -31,6 +33,28 @@ export class Qwen3Client {
     return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
   }
 
+  /**
+   * Initialize Gradio Client connection to Qwen3 Space
+   */
+  private async initializeGradioClient(): Promise<void> {
+    if (this.gradioClient) {
+      return; // Already initialized
+    }
+
+    try {
+      // Use dynamic import to avoid module issues
+      const { Client } = await import('@gradio/client');
+      
+      console.log(`🔗 Connecting to ${this.options.huggingFaceSpace}...`);
+      this.gradioClient = await Client.connect(this.options.huggingFaceSpace);
+      
+      console.log(`✅ Connected to Qwen3 space: ${this.options.huggingFaceSpace}`);
+    } catch (error) {
+      console.error('Failed to initialize Qwen3 Gradio Client:', error);
+      throw new Error(`Could not connect to Qwen3 space: ${error}`);
+    }
+  }
+
   /**
    * Predict method that mimics rwkvClient.predict("/chat", [...]) API
    * @param endpoint Should be "/chat" for compatibility
@@ -54,42 +78,13 @@ export class Qwen3Client {
     ] = params;
 
     try {
-      // Build messages array in the format expected by Qwen3
-      const messages: Qwen3Message[] = [];
-      
-      // Add system prompt if provided
-      if (system_prompt && system_prompt.trim()) {
-        messages.push({
-          role: 'system',
-          content: system_prompt
-        });
-      }
+      // Ensure Gradio client is initialized
+      await this.initializeGradioClient();
 
-      // Add chat history
-      if (Array.isArray(chat_history)) {
-        chat_history.forEach((entry: any) => {
-          if (Array.isArray(entry) && entry.length >= 2) {
-            // Handle [user_message, assistant_message] format
-            messages.push({
-              role: 'user',
-              content: entry[0]
-            });
-            messages.push({
-              role: 'assistant', 
-              content: entry[1]
-            });
-          }
-        });
-      }
-
-      // Add current message
-      messages.push({
-        role: 'user',
-        content: message
-      });
-
-      // Use Hugging Face Spaces API
-      const response = await this.callQwen3API(messages, {
+      // Use the proper Gradio Client API to call the add_message function
+      const response = await this.callQwen3API(message, {
+        sys_prompt: system_prompt,
+        model: this.options.model,
         max_new_tokens,
         temperature,
         top_p,
@@ -108,94 +103,96 @@ export class Qwen3Client {
     }
   }
 
-  private async callQwen3API(messages: Qwen3Message[], options: any): Promise<string> {
-    // Use the Gradio Client to connect to the Qwen3 HF Space
-    // For now, simulate the API call until we can get the proper Gradio client working
-    
+  private async callQwen3API(message: string, options: any): Promise<string> {
     try {
-      // Build the message content
-      const systemMessage = messages.find(m => m.role === 'system')?.content || '';
-      const userMessage = messages[messages.length - 1].content;
-      
-      // For development: Use a proper HTTP API approach
-      // This simulates what the Gradio client would do
-      const spaceUrl = `https://${this.options.huggingFaceSpace.replace('/', '-')}.hf.space`;
-      
-      // Construct the API payload similar to what we see in the Qwen3-Demo
-      const payload = {
-        data: [
-          userMessage, // input message
-          {
-            model: this.options.model,
-            sys_prompt: systemMessage,
-            thinking_budget: Math.min(options.max_new_tokens || 2048, 38) // Qwen3 has max 38k thinking budget
-          },
-          {
-            enable_thinking: false // Disable for faster responses
-          },
-          {
-            conversation_contexts: {},
-            conversations: [],
-            conversation_id: this.sessionId
-          }
-        ],
-        fn_index: 0 // Function index for add_message
+      if (!this.gradioClient) {
+        throw new Error('Gradio client not initialized');
+      }
+
+      // Prepare settings for the Qwen3 space based on app.py structure
+      const settingsFormValue = {
+        model: options.model || this.options.model,
+        sys_prompt: options.sys_prompt || "You are a helpful assistant.",
+        thinking_budget: Math.min(options.max_new_tokens || 20, 38), // Qwen3 has max 38k thinking budget
+        temperature: options.temperature || 0.7,
+        top_p: options.top_p || 0.95,
+        top_k: options.top_k || 50,
+        repetition_penalty: options.repetition_penalty || 1.0
       };
 
-      // Try the direct API call
-      const response = await fetch(`${spaceUrl}/api/predict`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload)
-      });
+      // Thinking button state - disable for faster responses
+      const thinkingBtnState = {
+        enable_thinking: false
+      };
+
+      // Initial state for the conversation
+      const stateValue = {
+        conversation_contexts: {},
+        conversations: [],
+        conversation_id: this.sessionId
+      };
 
-      if (response.ok) {
-        const result = await response.json();
-        
-        // Parse the Gradio response format
-        if (result && result.data && Array.isArray(result.data)) {
-          // Look for chatbot data in the response
-          for (const item of result.data) {
-            if (Array.isArray(item) && item.length > 0) {
-              const lastMessage = item[item.length - 1];
-              if (lastMessage && lastMessage.content && Array.isArray(lastMessage.content)) {
-                const textContent = lastMessage.content.find((c: any) => c.type === 'text');
-                if (textContent && textContent.content) {
-                  return textContent.content;
+      console.log(`🤖 Calling Qwen3 add_message with: "${message.substring(0, 50)}..."`);
+
+      // Call the add_message function from the Gradio app
+      // Based on app.py line 170: add_message(input_value, settings_form_value, thinking_btn_state_value, state_value)
+      const result = await this.gradioClient.predict("/add_message", [
+        message,                // input_value
+        settingsFormValue,      // settings_form_value  
+        thinkingBtnState,       // thinking_btn_state_value
+        stateValue              // state_value
+      ]);
+
+      console.log('🔍 Raw Qwen3 response:', result);
+
+      // Extract the response text from the Gradio result
+      if (result && result.data && Array.isArray(result.data)) {
+        // The response format should include the chatbot data
+        // Look for the chatbot component data (usually index 2 or 3)
+        for (let i = 0; i < result.data.length; i++) {
+          const item = result.data[i];
+          if (Array.isArray(item) && item.length > 0) {
+            // Look for the last assistant message
+            const lastMessage = item[item.length - 1];
+            if (lastMessage && lastMessage.role === 'assistant' && lastMessage.content) {
+              // Extract text content from the structured content
+              if (Array.isArray(lastMessage.content)) {
+                for (const contentItem of lastMessage.content) {
+                  if (contentItem.type === 'text' && contentItem.content) {
+                    console.log('✅ Extracted Qwen3 response:', contentItem.content.substring(0, 100) + '...');
+                    return contentItem.content;
+                  }
                 }
+              } else if (typeof lastMessage.content === 'string') {
+                console.log('✅ Extracted Qwen3 response:', lastMessage.content.substring(0, 100) + '...');
+                return lastMessage.content;
               }
             }
           }
         }
-
-        throw new Error('Could not extract text from Qwen3 response');
       }
 
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      // If we can't extract the response, throw an error to trigger fallback
+      throw new Error('Could not extract text response from Qwen3 API result');
 
     } catch (error) {
-      console.warn('Qwen3 direct API call failed, using fallback strategy:', error);
+      console.warn('Qwen3 Gradio API call failed, using fallback strategy:', error);
       
       // Development fallback: Generate a reasonable response based on the input
-      const userMessage = messages[messages.length - 1].content;
-      const systemMessage = messages.find(m => m.role === 'system')?.content || '';
-      
       // If it's a JSON generation request, provide a structured response
-      if (userMessage.includes('JSON') || userMessage.includes('json') || systemMessage.includes('JSON')) {
-        if (userMessage.includes('monster') || userMessage.includes('stats')) {
-          return this.generateFallbackMonsterStats(userMessage);
+      if (message.includes('JSON') || message.includes('json') || options.sys_prompt?.includes('JSON')) {
+        if (message.includes('monster') || message.includes('stats')) {
+          return this.generateFallbackMonsterStats(message);
         }
         return '```json\n{"status": "Qwen3 temporarily unavailable", "using_fallback": true}\n```';
       }
       
       // For text generation, provide a reasonable response
-      if (userMessage.includes('visual description') || userMessage.includes('image generation')) {
-        return this.generateFallbackImageDescription(userMessage);
+      if (message.includes('visual description') || message.includes('image generation')) {
+        return this.generateFallbackImageDescription(message);
       }
       
-      return `I understand you're asking about: "${userMessage.substring(0, 100)}..."\n\nHowever, I'm currently unable to connect to the Qwen3 service. The system will automatically fall back to an alternative model for your request.`;
+      return `I understand you're asking about: "${message.substring(0, 100)}..."\n\nHowever, I'm currently unable to connect to the Qwen3 service. The system will automatically fall back to an alternative model for your request.`;
     }
   }
 
@@ -247,18 +244,28 @@ export class Qwen3Client {
    */
   async testConnection(): Promise<boolean> {
     try {
+      // Try to initialize the Gradio client first
+      await this.initializeGradioClient();
+      
+      // Test with a simple message
       const result = await this.predict('/chat', [
-        'Hello, are you working?',
+        'Hello, are you working? Please respond with just "Yes" if you can receive this message.',
         [],
-        'You are a helpful assistant. Respond briefly.',
-        100,
+        'You are a helpful assistant. Respond very briefly with just "Yes" if you can receive messages.',
+        50, // Small token limit for test
         0.7,
         0.95,
         50,
         1.0
       ]);
       
-      return result.data && result.data[0] && typeof result.data[0] === 'string' && result.data[0].length > 0;
+      const response = result.data && result.data[0] && typeof result.data[0] === 'string' ? result.data[0] : '';
+      const isWorking = response.length > 0 && !response.includes('temporarily unavailable');
+      
+      console.log(`🔍 Qwen3 connection test result: ${isWorking ? 'PASS' : 'FAIL'}`);
+      console.log(`📝 Test response: "${response.substring(0, 50)}..."`);
+      
+      return isWorking;
     } catch (error) {
       console.error('Qwen3 connection test failed:', error);
       return false;

src/lib/services/textGenerationClient.ts

@@ -34,15 +34,24 @@ class TextGenerationManager {
   async initialize(): Promise<void> {
     if (this.connectionTested) return;
 
-    console.log('Testing Qwen3 connection...');
+    console.log('🔍 Testing Qwen3 connection with improved verification...');
     
     try {
       if (this.primaryClient.testConnection) {
-        const qwen3Available = await this.primaryClient.testConnection();
+        // Add timeout wrapper for connection test
+        const connectionTestPromise = this.primaryClient.testConnection();
+        const timeoutPromise = new Promise<boolean>((_, reject) => {
+          setTimeout(() => reject(new Error('Connection test timeout')), 15000); // 15 second timeout
+        });
+
+        const qwen3Available = await Promise.race([connectionTestPromise, timeoutPromise]);
         
         if (qwen3Available) {
           console.log('✅ Qwen3 client is available and will be used for text generation');
           this.useQwen3 = true;
+          
+          // Perform a secondary validation test to ensure real functionality
+          await this.performSecondaryValidation();
         } else {
           console.log('⚠️ Qwen3 client is not available, falling back to Zephyr-7B');
           this.useQwen3 = false;
@@ -57,6 +66,48 @@ class TextGenerationManager {
     this.connectionTested = true;
   }
 
+  /**
+   * Perform secondary validation to ensure Qwen3 is actually working
+   */
+  private async performSecondaryValidation(): Promise<void> {
+    try {
+      console.log('🔧 Performing secondary validation of Qwen3 functionality...');
+      
+      // Test with a specific request that should return predictable content
+      const validationResult = await Promise.race([
+        this.primaryClient.predict('/chat', [
+          'Respond with exactly this text: "VALIDATION_SUCCESS"',
+          [],
+          'You are a helpful assistant. Follow instructions exactly as given.',
+          20, // Very small token limit
+          0.1, // Low temperature for deterministic output
+          0.9,
+          10,
+          1.0
+        ]),
+        new Promise<any>((_, reject) => {
+          setTimeout(() => reject(new Error('Validation timeout')), 10000); // 10 second timeout
+        })
+      ]);
+
+      const response = validationResult?.data?.[0] || '';
+      const isValidResponse = typeof response === 'string' && 
+                             response.length > 0 && 
+                             !response.includes('temporarily unavailable') &&
+                             !response.includes('using_fallback');
+
+      if (!isValidResponse) {
+        console.warn('⚠️ Secondary validation failed - Qwen3 responses seem invalid, switching to fallback');
+        this.useQwen3 = false;
+      } else {
+        console.log('✅ Secondary validation passed - Qwen3 is fully functional');
+      }
+    } catch (error) {
+      console.warn('⚠️ Secondary validation failed with error, switching to fallback:', error);
+      this.useQwen3 = false;
+    }
+  }
+
   /**
    * Get the active client for text generation
    */
@@ -140,6 +191,22 @@ class TextGenerationManager {
       activeClient: this.useQwen3 ? 'Qwen3' : 'Zephyr-7B'
     };
   }
+
+  /**
+   * Reset connection testing to allow re-initialization
+   */
+  resetConnectionTest() {
+    this.connectionTested = false;
+    console.log('🔄 Connection test reset - will re-test on next prediction');
+  }
+
+  /**
+   * Force re-test connection and re-initialize
+   */
+  async retestConnection(): Promise<void> {
+    this.connectionTested = false;
+    await this.initialize();
+  }
 }
 
 // Export singleton instance