{"id":1774,"date":"2024-05-30T07:37:51","date_gmt":"2024-05-30T07:37:51","guid":{"rendered":"https:\/\/www.nicekj.com\/?p=1774"},"modified":"2024-05-30T07:38:27","modified_gmt":"2024-05-30T07:38:27","slug":"shiyong-flutter-he-openai-goujianneirongtuijianyingyongchengxu","status":"publish","type":"post","link":"https:\/\/www.nicekj.com\/shiyong-flutter-he-openai-goujianneirongtuijianyingyongchengxu.html","title":{"rendered":"\u4f7f\u7528 Flutter \u548c OpenAI \u6784\u5efa\u5185\u5bb9\u63a8\u8350\u5e94\u7528\u7a0b\u5e8f"},"content":{"rendered":"<blockquote>\n<ul>\n<li>** \ud83e\udd1f** \u4e00\u7ad9\u5f0f\u8f7b\u677e\u6784\u5efa\u5c0f\u7a0b\u5e8f\u3001Web\u7f51\u7ad9\u3001\u79fb\u52a8\u5e94\u7528&nbsp; <strong>\uff1a\ud83d\udc49<\/strong>****<a href=\"https:\/\/link.juejin.cn\/?target=https%3A%2F%2Fwww.memfiredb.com%2F%3Ffrom%3DXIMgJh\" title=\"https:\/\/link.juejin.cn\/?target=https%3A%2F%2Fwww.memfiredb.com%2F%3Ffrom%3DXIMgJh\" target=\"_blank\" rel=\"noopener\">\u5728\u7ebf\u5730\u5740<\/a>********<\/li>\n<li><strong>\ud83d\udc85<\/strong>\u5c0f\u7a0b\u5e8f\u5171\u540c\u5b66\u4e60\u7fa4\uff0c\u6709\u4e24\u767e\u591a\u5957\u5c0f\u7a0b\u5e8f\u6e90\u7801\uff0c\u53ef\u514d\u8d39\u57f9\u8bad\uff0c\u4e00\u8d77\u7545\u8c08\u6478\u9c7c<\/li>\n<\/ul>\n<\/blockquote>\n<blockquote>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/2cfe9591f971dd34741a094d7f656dd4.png\" alt=\"\u4f7f\u7528 Flutter \u548c OpenAI \u6784\u5efa\u5185\u5bb9\u63a8\u8350\u5e94\u7528\u7a0b\u5e8f\" \/><\/figure>\n<\/p>\n<\/blockquote>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/3cec9a9e50d4dd5140c37b26c82a07dd.png\" alt=\"\u4f7f\u7528 Flutter \u548c OpenAI \u6784\u5efa\u5185\u5bb9\u63a8\u8350\u5e94\u7528\u7a0b\u5e8f\" \/><\/figure>\n<\/p>\n<p>\u5411\u7528\u6237\u63a8\u8350\u76f8\u5173\u5185\u5bb9\u5bf9\u4e8e\u4fdd\u6301\u7528\u6237\u5bf9\u5e94\u7528\u7a0b\u5e8f\u7684\u5174\u8da3\u81f3\u5173\u91cd\u8981\u3002\u5c3d\u7ba1\u8fd9\u662f\u6211\u4eec\u5e0c\u671b\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u62e5\u6709\u7684\u5e38\u89c1\u529f\u80fd\uff0c\u4f46\u6784\u5efa\u5b83\u5e76\u4e0d\u7b80\u5355\u3002\u968f\u7740\u77e2\u91cf\u6570\u636e\u5e93\u548c\u5f00\u653e\u4eba\u5de5\u667a\u80fd\u7684\u51fa\u73b0\uff0c\u8fd9\u79cd\u60c5\u51b5\u53d1\u751f\u4e86\u53d8\u5316\u3002\u4eca\u5929\uff0c\u6211\u4eec\u53ea\u9700\u5bf9\u5411\u91cf\u6570\u636e\u5e93\u8fdb\u884c\u4e00\u6b21\u67e5\u8be2\uff0c\u5c31\u53ef\u4ee5\u6267\u884c\u9ad8\u5ea6\u4e86\u89e3\u5185\u5bb9\u4e0a\u4e0b\u6587\u7684\u8bed\u4e49\u641c\u7d22\u3002\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5c06\u4ecb\u7ecd\u5982\u4f55\u521b\u5efa\u4e00\u4e2a Flutter \u89c2\u5f71\u5e94\u7528\uff0c\u8be5\u5e94\u7528\u6839\u636e\u7528\u6237\u6b63\u5728\u89c2\u770b\u7684\u5185\u5bb9\u63a8\u8350\u53e6\u4e00\u90e8\u7535\u5f71\u3002<\/p>\n<p>\u4f5c\u4e3a\u5feb\u901f\u514d\u8d23\u58f0\u660e\uff0c\u672c\u6587\u6982\u8ff0\u4e86\u60a8\u53ef\u4ee5\u4f7f\u7528\u5411\u91cf\u6570\u636e\u5e93\u6784\u5efa\u7684\u5185\u5bb9\uff0c\u56e0\u6b64\u4e0d\u4f1a\u6df1\u5165\u63a2\u8ba8\u5b9e\u73b0\u7684\u6bcf\u4e2a\u7ec6\u8282\u3002\u60a8\u53ef\u4ee5\u5728\u672c\u6587\u4e2d\u627e\u5230\u8be5\u5e94\u7528\u7a0b\u5e8f\u7684\u5b8c\u6574\u4ee3\u7801\u5e93\uff0c\u4ee5\u67e5\u627e\u66f4\u591a\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n<h1 data-id=\"heading-0\">\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528\u77e2\u91cf\u6570\u636e\u5e93\u6765\u63a8\u8350\u5185\u5bb9<\/h1>\n<p>\u5728\u673a\u5668\u5b66\u4e60\u4e2d\uff0c\u7ecf\u5e38\u4f7f\u7528\u5c06\u4e00\u6bb5\u5185\u5bb9\u8f6c\u6362\u4e3a\u5411\u91cf\u8868\u793a\u7684\u8fc7\u7a0b\uff0c\u79f0\u4e3a\u5d4c\u5165\uff0c\u56e0\u4e3a\u5b83\u5141\u8bb8\u6211\u4eec\u4ece\u6570\u5b66\u4e0a\u5206\u6790\u8bed\u4e49\u5185\u5bb9\u3002\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u5f15\u64ce\uff0c\u53ef\u4ee5\u521b\u5efa\u975e\u5e38\u4e86\u89e3\u6570\u636e\u4e0a\u4e0b\u6587\u7684\u5d4c\u5165\uff0c\u6211\u4eec\u53ef\u4ee5\u67e5\u770b\u6bcf\u4e2a\u5d4c\u5165\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u770b\u770b\u8fd9\u4e24\u4e2a\u5185\u5bb9\u662f\u5426\u76f8\u4f3c\u3002Open AI \u63d0\u4f9b\u4e86\u4e00\u4e2a\u8bad\u7ec3\u6709\u7d20\u7684\u6a21\u578b\uff0c\u7528\u4e8e\u5c06\u6587\u672c\u5185\u5bb9\u8f6c\u6362\u4e3a\u5d4c\u5165\uff0c\u56e0\u6b64\u4f7f\u7528\u5b83\u53ef\u4ee5\u8ba9\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u9ad8\u8d28\u91cf\u7684\u63a8\u8350\u5f15\u64ce\u3002<\/p>\n<p>\u5411\u91cf\u6570\u636e\u5e93\u6709\u5f88\u591a\u9009\u62e9\uff0c\u4f46\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5c06\u4f7f\u7528 Supabase \u4f5c\u4e3a\u6211\u4eec\u7684\u5411\u91cf\u6570\u636e\u5e93\uff0c\u56e0\u4e3a\u6211\u4eec\u4e5f\u60f3\u5b58\u50a8\u975e\u5d4c\u5165\u6570\u636e\uff0c\u5e76\u4e14\u6211\u4eec\u5e0c\u671b\u80fd\u591f\u4ece\u6211\u4eec\u7684 Flutter \u5e94\u7528\u7a0b\u5e8f\u4e2d\u8f7b\u677e\u67e5\u8be2\u5b83\u4eec\u3002<\/p>\n<h1 data-id=\"heading-1\">\u6211\u4eec\u5c06\u6784\u5efa\u4ec0\u4e48<\/h1>\n<p>\u6211\u4eec\u5c06\u6784\u5efa\u4e00\u4e2a\u7535\u5f71\u5217\u8868\u5e94\u7528\u7a0b\u5e8f\u3002 \u60f3\u60f3Netflix\uff0c\u9664\u975e\u7528\u6237\u65e0\u6cd5\u5b9e\u9645\u89c2\u770b\u7535\u5f71\u3002\u6b64\u5e94\u7528\u7a0b\u5e8f\u7684\u76ee\u7684\u662f\u6f14\u793a\u5982\u4f55\u663e\u793a\u76f8\u5173\u5185\u5bb9\u4ee5\u4fdd\u6301\u7528\u6237\u7684\u53c2\u4e0e\u5ea6\u3002<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/8b0b0f916c52f6a7ca16114c53de0422.png\" alt=\"\u4f7f\u7528 Flutter \u548c OpenAI \u6784\u5efa\u5185\u5bb9\u63a8\u8350\u5e94\u7528\u7a0b\u5e8f\" \/><\/figure>\n<\/p>\n<h1 data-id=\"heading-2\">\u4f7f\u7528\u7684\u5de5\u5177\/\u6280\u672f<\/h1>\n<ul>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fflutter.dev%2F\" target=\"_blank\" title=\"https:\/\/flutter.dev\/\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">Flutter<\/a> &#8211; \u7528\u4e8e\u521b\u5efa\u5e94\u7528\u7684\u754c\u9762<\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fsupabase.com%2F\" target=\"_blank\" title=\"https:\/\/supabase.com\/\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">Supabase <\/a>&#8211; \u7528\u4e8e\u5728\u6570\u636e\u5e93\u4e2d\u5b58\u50a8\u5d4c\u5165\u548c\u5176\u4ed6\u7535\u5f71\u6570\u636e<\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fopenai.com%2Fblog%2Fopenai-api\" target=\"_blank\" title=\"https:\/\/openai.com\/blog\/openai-api\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">Open AI API<\/a> &#8211; \u7528\u4e8e\u5c06\u7535\u5f71\u6570\u636e\u8f6c\u6362\u4e3a\u5d4c\u5165<\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fopenai.com%2Fblog%2Fopenai-api\" target=\"_blank\" title=\"https:\/\/openai.com\/blog\/openai-api\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">TMDB API<\/a> &#8211; \u83b7\u53d6\u7535\u5f71\u6570\u636e\u7684\u514d\u8d39API<\/li>\n<\/ul>\n<h1 data-id=\"heading-3\">\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f<\/h1>\n<p>\u6211\u4eec\u9996\u5148\u9700\u8981\u7528\u4e00\u4e9b\u5173\u4e8e\u7535\u5f71\u53ca\u5176\u5d4c\u5165\u7684\u6570\u636e\u6765\u586b\u5145\u6570\u636e\u5e93\u3002\u4e3a\u6b64\uff0c\u6211\u4eec\u5c06\u4f7f\u7528 Supabase \u8fb9\u7f18\u51fd\u6570\u8c03\u7528 TMDB API \u548c Open AI API \u6765\u83b7\u53d6\u7535\u5f71\u6570\u636e\u5e76\u751f\u6210\u5d4c\u5165\u3002\u4e00\u65e6\u6211\u4eec\u6709\u4e86\u6570\u636e\uff0c\u6211\u4eec\u5c31\u4f1a\u628a\u5b83\u4eec\u5b58\u50a8\u5728 Supabase \u6570\u636e\u5e93\u4e2d\uff0c\u7136\u540e\u4ece\u6211\u4eec\u7684 Flutter \u5e94\u7528\u7a0b\u5e8f\u4e2d\u67e5\u8be2\u5b83\u4eec\u3002<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/da915a238d553b125a47a3f5ad637ac4.png\" alt=\"\u4f7f\u7528 Flutter \u548c OpenAI \u6784\u5efa\u5185\u5bb9\u63a8\u8350\u5e94\u7528\u7a0b\u5e8f\" \/><\/figure>\n<\/p>\n<h1 data-id=\"heading-4\">\u6b65\u9aa4 1\uff1a\u521b\u5efa\u8868<\/h1>\n<p>\u6211\u4eec\u5c06\u4e3a\u8fd9\u4e2a\u9879\u76ee\u51c6\u5907\u4e00\u5f20\u684c\u5b50\uff0c\u90a3\u5c31\u662f\u7535\u5f71\u684c\u5b50\u3002Films \u8868\u5c06\u5b58\u50a8\u6709\u5173\u6bcf\u90e8\u7535\u5f71\u7684\u4e00\u4e9b\u57fa\u672c\u4fe1\u606f\uff0c\u4f8b\u5982\u6807\u9898\u6216\u53d1\u884c\u6570\u636e\uff0c\u4ee5\u53ca\u5d4c\u5165\u6bcf\u90e8\u7535\u5f71\u7684\u6982\u8ff0\uff0c\u4ee5\u4fbf\u6211\u4eec\u53ef\u4ee5\u5bf9\u5f7c\u6b64\u8fdb\u884c\u5411\u91cf\u76f8\u4f3c\u6027\u641c\u7d22\u3002<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">sql<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-sql code-block-extension-codeShowNum\" lang=\"sql\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-comment\">-- Enable pgvector extension<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"><span class=\"hljs-keyword\">create<\/span> extension vector<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"><span class=\"hljs-keyword\">with<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\">  schema extensions;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\"><span class=\"hljs-comment\">-- Create table<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"><span class=\"hljs-keyword\">create<\/span> <span class=\"hljs-keyword\">table<\/span> public.films (<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\">  id <span class=\"hljs-type\">integer<\/span> <span class=\"hljs-keyword\">primary<\/span> key,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">  title text,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">  overview text,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\">  release_date <span class=\"hljs-type\">date<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\">  backdrop_path text,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\">  embedding vector(<span class=\"hljs-number\">1536<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\">);<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\"><span class=\"hljs-comment\">-- Enable row level security<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\"><span class=\"hljs-keyword\">alter<\/span> <span class=\"hljs-keyword\">table<\/span> public.films enable <span class=\"hljs-type\">row<\/span> level security;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\"><span class=\"hljs-comment\">-- Create policy to allow anyone to read the films table<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\"><span class=\"hljs-keyword\">create<\/span> policy \"Fils are public.\" <span class=\"hljs-keyword\">on<\/span> public.films <span class=\"hljs-keyword\">for<\/span> <span class=\"hljs-keyword\">select<\/span> <span class=\"hljs-keyword\">using<\/span> (<span class=\"hljs-literal\">true<\/span>);<\/span>\n<\/code><\/pre>\n<h1 data-id=\"heading-5\">\u7b2c 2 \u6b65\uff1a\u83b7\u53d6\u52a8\u753b\u6570\u636e<\/h1>\n<p>\u83b7\u53d6\u7535\u5f71\u6570\u636e\u76f8\u5bf9\u7b80\u5355\u3002TMDB API\u63d0\u4f9b\u4e86\u4e00\u4e2a\u6613\u4e8e\u4f7f\u7528\u7684\u7535\u5f71\u7aef\u70b9\uff0c\u7528\u4e8e\u67e5\u8be2\u6709\u5173\u7535\u5f71\u7684\u4fe1\u606f\uff0c\u540c\u65f6\u63d0\u4f9b\u4e86\u5e7f\u6cdb\u7684\u8fc7\u6ee4\u5668\u6765\u7f29\u5c0f\u67e5\u8be2\u7ed3\u679c\u7684\u8303\u56f4\u3002<\/p>\n<p>\u6211\u4eec\u9700\u8981\u4e00\u4e2a\u540e\u7aef\u6765\u5b89\u5168\u5730\u8c03\u7528 API\uff0c\u4e3a\u6b64\uff0c\u6211\u4eec\u5c06\u4f7f\u7528 Supabase Edge Functions\u3002\u7b2c 2 \u6b65\u5230\u7b2c 4 \u6b65\u5c06\u6784\u9020\u6b64\u8fb9\u7f18\u51fd\u6570\u4ee3\u7801\uff0c\u5b8c\u6574\u7684\u4ee3\u7801\u793a\u4f8b\u53ef\u5728\u6b64\u5904\u627e\u5230\u3002<\/p>\n<p>\u4ee5\u4e0b\u4ee3\u7801\u5c06\u4e3a\u6211\u4eec\u63d0\u4f9b\u7ed9\u5b9a\u5e74\u4efd\u6700\u53d7\u6b22\u8fce\u7684 20 \u90e8\u7535\u5f71\u3002<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">csharp<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-csharp code-block-extension-codeShowNum\" lang=\"csharp\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-keyword\">const<\/span> searchParams = <span class=\"hljs-keyword\">new<\/span> URLSearchParams()<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'sort_by'<\/span>, <span class=\"hljs-string\">'popularity.desc'<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'page'<\/span>, <span class=\"hljs-string\">'1'<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'language'<\/span>, <span class=\"hljs-string\">'en-US'<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'primary_release_year'<\/span>, `${year}`)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'include_adult'<\/span>, <span class=\"hljs-string\">'false'<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'include_video'<\/span>, <span class=\"hljs-string\">'false'<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'region'<\/span>, <span class=\"hljs-string\">'US'<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'watch_region'<\/span>, <span class=\"hljs-string\">'US'<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">searchParams.<span class=\"hljs-keyword\">set<\/span>(<span class=\"hljs-string\">'with_original_language'<\/span>, <span class=\"hljs-string\">'en'<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\"><span class=\"hljs-keyword\">const<\/span> tmdbResponse = <span class=\"hljs-keyword\">await<\/span> fetch(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\">  `https:<span class=\"hljs-comment\">\/\/api.themoviedb.org\/3\/discover\/movie?${searchParams.toString()}`,<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\">  {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\">    method: <span class=\"hljs-string\">'GET'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\">    headers: {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\">      <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\">      Authorization: `Bearer ${tmdbApiKey}`,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\">    },<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\">  }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"21\">)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"22\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"23\"><span class=\"hljs-keyword\">const<\/span> tmdbJson = <span class=\"hljs-keyword\">await<\/span> tmdbResponse.json()<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"24\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"25\"><span class=\"hljs-keyword\">const<\/span> tmdbStatus = tmdbResponse.<span class=\"hljs-function\">status<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"26\"><span class=\"hljs-title\">if<\/span> (<span class=\"hljs-params\">!(<span class=\"hljs-number\">200<\/span> &lt;= tmdbStatus &amp;&amp; tmdbStatus &lt;= <span class=\"hljs-number\">299<\/span><\/span>)) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"27\">  <span class=\"hljs-keyword\">return<\/span> returnError({<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"28\">    message: <span class=\"hljs-string\">'Error retrieving data from tmdb API'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"29\">  })<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"30\">}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"31\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"32\"><span class=\"hljs-keyword\">const<\/span> films = tmdbJson.results<\/span>\n<\/code><\/pre>\n<h1 data-id=\"heading-6\">\u7b2c 3 \u6b65\uff1a\u751f\u6210\u5d4c\u5165<\/h1>\n<p>\u6211\u4eec\u53ef\u4ee5\u4ece\u4e0a\u4e00\u6b65\u4e2d\u83b7\u53d6\u7535\u5f71\u6570\u636e\uff0c\u5e76\u4e3a\u6bcf\u4e2a\u6570\u636e\u751f\u6210\u5d4c\u5165\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u8c03\u7528 Open AI Embeddings API \u5c06\u6bcf\u90e8\u7535\u5f71\u7684\u6982\u8ff0\u8f6c\u6362\u4e3a\u5d4c\u5165\u3002\u201c\u6982\u8ff0\u201d\u5305\u542b\u6bcf\u4e2a\u7535\u5f71\u7684\u6458\u8981\uff0c\u662f\u521b\u5efa\u8868\u793a\u6bcf\u4e2a\u7535\u5f71\u7684\u5d4c\u5165\u7684\u826f\u597d\u6765\u6e90\u3002<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">php<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-php code-block-extension-codeShowNum\" lang=\"php\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-variable constant_\">response<\/span> = await <span class=\"hljs-title function_ invoke__\">fetch<\/span>(<span class=\"hljs-string\">'https:\/\/api.openai.com\/v1\/embeddings'<\/span>, {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\">  <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\">  <span class=\"hljs-attr\">headers<\/span>: {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\">    <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\">    <span class=\"hljs-attr\">Authorization<\/span>: `Bearer ${openAiApiKey}`,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\">  },<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\">  <span class=\"hljs-attr\">body<\/span>: JSON.<span class=\"hljs-title function_ invoke__\">stringify<\/span>({<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\">    <span class=\"hljs-attr\">input<\/span>: film.overview,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">    <span class=\"hljs-attr\">model<\/span>: <span class=\"hljs-string\">'text-embedding-3-small'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">  }),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\">})<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\"><span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-variable constant_\">responseData<\/span> = await response.<span class=\"hljs-title function_ invoke__\">json<\/span>()<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\"><span class=\"hljs-keyword\">if<\/span> (responseData.error) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\">  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-title function_ invoke__\">returnError<\/span>({<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\">    <span class=\"hljs-attr\">message<\/span>: `<span class=\"hljs-built_in\">Error<\/span> obtaining Open API <span class=\"hljs-attr\">embedding<\/span>: ${responseData.error.message}`,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\">  })<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\">}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\"><span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-variable constant_\">embedding<\/span> = responseData.data[<span class=\"hljs-number\">0<\/span>].embedding<\/span>\n<\/code><\/pre>\n<h1 data-id=\"heading-7\">\u7b2c 4 \u6b65\uff1a\u5c06\u6570\u636e\u5b58\u50a8\u5728 Supabase \u6570\u636e\u5e93\u4e2d<\/h1>\n<p>\u4e00\u65e6\u6211\u4eec\u6709\u4e86\u7535\u5f71\u6570\u636e\u4ee5\u53ca\u5d4c\u5165\u6570\u636e\uff0c\u6211\u4eec\u5c31\u5269\u4e0b\u5b58\u50a8\u5b83\u4eec\u7684\u4efb\u52a1\u4e86\u3002\u6211\u4eec\u53ef\u4ee5\u5728 Supabase \u5ba2\u6237\u7aef\u4e0a\u8c03\u7528 upsert\uff08\uff09 \u51fd\u6570\u6765\u8f7b\u677e\u5b58\u50a8\u6570\u636e\u3002<\/p>\n<p>\u540c\u6837\uff0c\u4e3a\u4e86\u7b80\u5355\u8d77\u89c1\uff0c\u6211\u5728\u8fd9\u91cc\u7701\u7565\u4e86\u5f88\u591a\u4ee3\u7801\uff0c\u4f46\u60a8\u53ef\u4ee5\u5728\u6b64\u5904\u627e\u5230\u6b65\u9aa4 2 \u5230\u6b65\u9aa4 4 \u7684\u5b8c\u6574\u8fb9\u7f18\u51fd\u6570\u4ee3\u7801\u3002<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">php<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-php code-block-extension-codeShowNum\" lang=\"php\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-comment\">\/\/ Code from Step 2<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"><span class=\"hljs-comment\">\/\/ Get movie data and store them in `films` variable<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\">...<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"><span class=\"hljs-keyword\">for<\/span>(<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-variable constant_\">film<\/span> of films) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\">        <span class=\"hljs-comment\">\/\/ Code from Step 3<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\">  <span class=\"hljs-comment\">\/\/ Get the embedding and store it in `embeddings` variable<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">        filmsWithEmbeddings.<span class=\"hljs-title function_ invoke__\">push<\/span>({<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">          <span class=\"hljs-attr\">id<\/span>: film.id,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\">          <span class=\"hljs-attr\">title<\/span>: film.title,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\">          <span class=\"hljs-attr\">overview<\/span>: film.overview,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\">          <span class=\"hljs-attr\">release_date<\/span>: film.release_date,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\">          <span class=\"hljs-attr\">backdrop_path<\/span>: film.backdrop_path,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\">          embedding,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\">        })<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\">}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\"><span class=\"hljs-comment\">\/\/ Store each movies as well as their embeddings into Supabase database<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\"><span class=\"hljs-keyword\">const<\/span> { error } = await supabase.<span class=\"hljs-keyword\">from<\/span>(<span class=\"hljs-string\">'films'<\/span>).<span class=\"hljs-title function_ invoke__\">upsert<\/span>(filmsWithEmbeddings)<\/span>\n<\/code><\/pre>\n<h1 data-id=\"heading-8\">\u6b65\u9aa4\u4e94\uff1a\u521b\u5efa\u6570\u636e\u5e93\u51fd\u6570\u67e5\u8be2\u76f8\u4f3c\u5f71\u7247<\/h1>\n<p>\u4e3a\u4e86\u4f7f\u7528 Supabase \u6267\u884c\u5411\u91cf\u76f8\u4f3c\u6027\u641c\u7d22\uff0c\u6211\u4eec\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u6570\u636e\u5e93\u51fd\u6570\u3002\u6b64\u6570\u636e\u5e93\u51fd\u6570\u5c06\u91c7\u7528\u5d4c\u5165\u548cfilm_id\u4f5c\u4e3a\u5176\u53c2\u6570\u3002embedding \u53c2\u6570\u5c06\u662f\u7528\u4e8e\u5728\u6570\u636e\u5e93\u4e2d\u641c\u7d22\u7c7b\u4f3c\u7535\u5f71\u7684\u5d4c\u5165\uff0cfilm_id\u5c06\u7528\u4e8e\u7b5b\u9009\u51fa\u6b63\u5728\u67e5\u8be2\u7684\u540c\u4e00\u90e8\u7535\u5f71\u3002<\/p>\n<p>\u6b64\u5916\uff0c\u6211\u4eec\u5c06\u5728\u5d4c\u5165\u5217\u4e0a\u8bbe\u7f6e HSNW \u7d22\u5f15\uff0c\u4ee5\u4fbf\u5373\u4f7f\u4f7f\u7528\u5927\u578b\u6570\u636e\u96c6\u4e5f\u80fd\u6709\u6548\u5730\u8fd0\u884c\u67e5\u8be2\u3002<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">sql<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-sql code-block-extension-codeShowNum\" lang=\"sql\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-comment\">-- Set index on embedding column<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"><span class=\"hljs-keyword\">create<\/span> index <span class=\"hljs-keyword\">on<\/span> films <span class=\"hljs-keyword\">using<\/span> hnsw (embedding vector_cosine_ops);<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"><span class=\"hljs-comment\">-- Create function to find related films<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"><span class=\"hljs-keyword\">create<\/span> <span class=\"hljs-keyword\">or<\/span> replace <span class=\"hljs-keyword\">function<\/span> get_related_film(embedding vector(<span class=\"hljs-number\">1536<\/span>), film_id <span class=\"hljs-type\">integer<\/span>)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\"><span class=\"hljs-keyword\">returns<\/span> setof films<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"><span class=\"hljs-keyword\">language<\/span> <span class=\"hljs-keyword\">sql<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\"><span class=\"hljs-keyword\">as<\/span> $$<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">    <span class=\"hljs-keyword\">select<\/span> <span class=\"hljs-operator\">*<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">    <span class=\"hljs-keyword\">from<\/span> films<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\">    <span class=\"hljs-keyword\">where<\/span> id <span class=\"hljs-operator\">!=<\/span> film_id<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\">    <span class=\"hljs-keyword\">order<\/span> <span class=\"hljs-keyword\">by<\/span> films.embedding <span class=\"hljs-operator\">&lt;=&gt;<\/span> get_related_film.embedding<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\">    limit <span class=\"hljs-number\">6<\/span>;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\">$$ security invoker;<\/span>\n<\/code><\/pre>\n<h1 data-id=\"heading-9\">\u7b2c 6 \u6b65\uff1a\u521b\u5efa Flutter \u63a5\u53e3<\/h1>\n<p>\u73b0\u5728\u6211\u4eec\u5df2\u7ecf\u51c6\u5907\u597d\u4e86\u540e\u7aef\uff0c\u6211\u4eec\u9700\u8981\u505a\u7684\u5c31\u662f\u521b\u5efa\u4e00\u4e2a\u754c\u9762\u6765\u663e\u793a\u548c\u67e5\u8be2\u6570\u636e\u3002\u7531\u4e8e\u672c\u6587\u7684\u4e3b\u8981\u91cd\u70b9\u662f\u6f14\u793a\u4f7f\u7528\u5411\u91cf\u8fdb\u884c\u76f8\u4f3c\u6027\u641c\u7d22\uff0c\u56e0\u6b64\u6211\u4e0d\u4f1a\u8be6\u7ec6\u4ecb\u7ecd Flutter \u5b9e\u73b0\u7684\u6240\u6709\u7ec6\u8282\uff0c\u4f46\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc\u627e\u5230\u5b8c\u6574\u7684\u4ee3\u7801\u5e93\u3002<\/p>\n<p>\u6211\u4eec\u7684\u5e94\u7528\u7a0b\u5e8f\u5c06\u5305\u542b\u4ee5\u4e0b\u9875\u9762\uff1a<\/p>\n<ul>\n<li>\u4e3b\u9875\uff1a\u5e94\u7528\u7a0b\u5e8f\u7684\u5165\u53e3\u70b9\uff0c\u5e76\u663e\u793a\u7535\u5f71\u5217\u8868<\/li>\n<li>DetailsPage\uff1a\u663e\u793a\u7535\u5f71\u53ca\u5176\u76f8\u5173\u7535\u5f71\u7684\u8be6\u7ec6\u4fe1\u606f<\/li>\n<\/ul>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">css<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-css code-block-extension-codeShowNum\" lang=\"css\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\">lib\/<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\">\u251c\u2500\u2500 components\/<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\">\u2502   \u2514\u2500\u2500 film_cell<span class=\"hljs-selector-class\">.dart<\/span>          # Component displaying <span class=\"hljs-selector-tag\">a<\/span> single movie.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\">\u251c\u2500\u2500 models\/<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\">\u2502   \u2514\u2500\u2500 film<span class=\"hljs-selector-class\">.dart<\/span>               # <span class=\"hljs-selector-tag\">A<\/span> data model representing <span class=\"hljs-selector-tag\">a<\/span> single movie.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\">\u251c\u2500\u2500 pages\/<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\">\u2502   \u251c\u2500\u2500 details_page<span class=\"hljs-selector-class\">.dart<\/span>       # <span class=\"hljs-selector-tag\">A<\/span> page <span class=\"hljs-selector-tag\">to<\/span> <span class=\"hljs-attribute\">display<\/span> the <span class=\"hljs-selector-tag\">details<\/span> of <span class=\"hljs-selector-tag\">a<\/span> movie and other recommended movies.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\">\u2502   \u2514\u2500\u2500 home_page<span class=\"hljs-selector-class\">.dart<\/span>          # <span class=\"hljs-selector-tag\">A<\/span> page <span class=\"hljs-selector-tag\">to<\/span> <span class=\"hljs-attribute\">display<\/span> <span class=\"hljs-selector-tag\">a<\/span> list of movies.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">\u2514\u2500\u2500 <span class=\"hljs-selector-tag\">main<\/span><span class=\"hljs-selector-class\">.dart<\/span><\/span>\n<\/code><\/pre>\n<p>components\/film_cell.dart \u662f\u4e00\u4e2a\u5171\u4eab\u7ec4\u4ef6\uff0c\u7528\u4e8e\u663e\u793a\u4e3b\u9875\u548c\u8be6\u7ec6\u4fe1\u606f\u9875\u9762\u7684\u53ef\u70b9\u51fb\u5355\u5143\u683c\u3002models\/film.dart \u5305\u542b\u8868\u793a\u5355\u4e2a\u7535\u5f71\u7684\u6570\u636e\u6a21\u578b\u3002<\/p>\n<p>\u8fd9\u4e24\u4e2a\u9875\u9762\u5982\u4e0b\u6240\u793a\u3002\u795e\u5947\u7684\u4e8b\u60c5\u53d1\u751f\u5728\u8be6\u7ec6\u4fe1\u606f\u9875\u9762\u5e95\u90e8\u6807\u6709\u201c\u60a8\u53ef\u80fd\u8fd8\u559c\u6b22\uff1a\u201d\u7684\u90e8\u5206\u3002\u6211\u4eec\u6b63\u5728\u6267\u884c\u77e2\u91cf\u76f8\u4f3c\u6027\u641c\u7d22\uff0c\u4ee5\u4f7f\u7528\u6211\u4eec\u4e4b\u524d\u5b9e\u73b0\u7684\u6570\u636e\u5e93\u51fd\u6570\u83b7\u53d6\u4e0e\u6240\u9009\u7535\u5f71\u76f8\u4f3c\u7684\u7535\u5f71\u5217\u8868\u3002<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/2995560736a0d40231d380cc697cd017.png\" alt=\"\u4f7f\u7528 Flutter \u548c OpenAI \u6784\u5efa\u5185\u5bb9\u63a8\u8350\u5e94\u7528\u7a0b\u5e8f\" \/><\/figure>\n<\/p>\n<p>\u4ee5\u4e0b\u662f\u4e3b\u9875\u7684\u4ee3\u7801\u3002\u8fd9\u662f\u4e00\u4e2a\u7b80\u5355\u7684 ListView\uff0c\u5e26\u6709\u6765\u81ea\u6211\u4eec films \u8868\u7684\u6807\u51c6\u9009\u62e9\u67e5\u8be2\u3002\u8fd9\u91cc\u6ca1\u4ec0\u4e48\u7279\u522b\u7684\u3002<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">scala<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-scala code-block-extension-codeShowNum\" lang=\"scala\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-keyword\">import<\/span> '<span class=\"hljs-keyword\">package<\/span>:filmsearch\/components\/film_cell.dart';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"><span class=\"hljs-keyword\">import<\/span> '<span class=\"hljs-keyword\">package<\/span>:filmsearch\/main.dart';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"><span class=\"hljs-keyword\">import<\/span> '<span class=\"hljs-keyword\">package<\/span>:filmsearch\/models\/film.dart';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"><span class=\"hljs-keyword\">import<\/span> '<span class=\"hljs-keyword\">package<\/span>:flutter\/material.dart';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HomePage<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatefulWidget<\/span> <\/span>{<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\">  const <span class=\"hljs-type\">HomePage<\/span>({<span class=\"hljs-keyword\">super<\/span>.key});<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">  <span class=\"hljs-meta\">@override<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\">  <span class=\"hljs-type\">State<\/span>&lt;<span class=\"hljs-type\">HomePage<\/span>&gt; createState() =&gt; _HomePageState();<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\">}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">_HomePageState<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">State&lt;HomePage&gt;<\/span> <\/span>{<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\">  <span class=\"hljs-keyword\">final<\/span> filmsFuture = supabase<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\">      .from('films')<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\">      .select&lt;<span class=\"hljs-type\">List<\/span>&lt;<span class=\"hljs-type\">Map<\/span>&lt;<span class=\"hljs-type\">String<\/span>, dynamic&gt;&gt;&gt;()<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\">      .withConverter&lt;<span class=\"hljs-type\">List<\/span>&lt;<span class=\"hljs-type\">Film<\/span>&gt;&gt;((data) =&gt; data.map(<span class=\"hljs-type\">Film<\/span>.fromJson).toList());<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\">  <span class=\"hljs-meta\">@override<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"21\">  <span class=\"hljs-type\">Widget<\/span> build(<span class=\"hljs-type\">BuildContext<\/span> context) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"22\">    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-type\">Scaffold<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"23\">      appBar: <span class=\"hljs-type\">AppBar<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"24\">        title: const <span class=\"hljs-type\">Text<\/span>('<span class=\"hljs-type\">Films<\/span>'),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"25\">      ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"26\">      body: <span class=\"hljs-type\">FutureBuilder<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"27\">          future: filmsFuture,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"28\">          builder: (context, snapshot) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"29\">            <span class=\"hljs-keyword\">if<\/span> (snapshot.hasError) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"30\">              <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-type\">Center<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"31\">                child: <span class=\"hljs-type\">Text<\/span>(snapshot.error.toString()),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"32\">              );<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"33\">            }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"34\">            <span class=\"hljs-keyword\">if<\/span> (!snapshot.hasData) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"35\">              <span class=\"hljs-keyword\">return<\/span> const <span class=\"hljs-type\">Center<\/span>(child: <span class=\"hljs-type\">CircularProgressIndicator<\/span>());<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"36\">            }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"37\">            <span class=\"hljs-keyword\">final<\/span> films = snapshot.data!;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"38\">            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-type\">ListView<\/span>.builder(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"39\">              itemBuilder: (context, index) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"40\">                <span class=\"hljs-keyword\">final<\/span> film = films[index];<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"41\">                <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-type\">FilmCell<\/span>(film: film);<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"42\">              },<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"43\">              itemCount: films.length,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"44\">            );<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"45\">          }),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"46\">    );<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"47\">  }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"48\">}<\/span>\n<\/code><\/pre>\n<p>\u5728\u8be6\u60c5\u9875\u4e2d\uff0c\u6211\u4eec\u8c03\u7528\u6b65\u9aa45\u4e2d\u521b\u5efa\u7684get_related_film\u6570\u636e\u5e93\u51fd\u6570\uff0c\u83b7\u53d6\u6700\u76f8\u5173\u76846\u90e8\u7535\u5f71\u5e76\u5c55\u793a\u51fa\u6765\u3002<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">less<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-less code-block-extension-codeShowNum\" lang=\"less\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-selector-tag\">import<\/span> '<span class=\"hljs-selector-tag\">package<\/span>:<span class=\"hljs-selector-tag\">filmsearch<\/span>\/<span class=\"hljs-selector-tag\">components<\/span>\/<span class=\"hljs-selector-tag\">film_cell<\/span><span class=\"hljs-selector-class\">.dart<\/span>';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"><span class=\"hljs-selector-tag\">import<\/span> '<span class=\"hljs-selector-tag\">package<\/span>:<span class=\"hljs-selector-tag\">filmsearch<\/span>\/<span class=\"hljs-selector-tag\">main<\/span><span class=\"hljs-selector-class\">.dart<\/span>';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"><span class=\"hljs-selector-tag\">import<\/span> '<span class=\"hljs-selector-tag\">package<\/span>:<span class=\"hljs-selector-tag\">filmsearch<\/span>\/<span class=\"hljs-selector-tag\">models<\/span>\/<span class=\"hljs-selector-tag\">film<\/span><span class=\"hljs-selector-class\">.dart<\/span>';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"><span class=\"hljs-selector-tag\">import<\/span> '<span class=\"hljs-selector-tag\">package<\/span>:<span class=\"hljs-selector-tag\">flutter<\/span>\/<span class=\"hljs-selector-tag\">material<\/span><span class=\"hljs-selector-class\">.dart<\/span>';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"><span class=\"hljs-selector-tag\">import<\/span> '<span class=\"hljs-selector-tag\">package<\/span>:<span class=\"hljs-selector-tag\">intl<\/span>\/<span class=\"hljs-selector-tag\">intl<\/span><span class=\"hljs-selector-class\">.dart<\/span>';<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"><span class=\"hljs-selector-tag\">class<\/span> <span class=\"hljs-selector-tag\">DetailsPage<\/span> <span class=\"hljs-selector-tag\">extends<\/span> <span class=\"hljs-selector-tag\">StatefulWidget<\/span> {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\">  <span class=\"hljs-selector-tag\">const<\/span> <span class=\"hljs-selector-tag\">DetailsPage<\/span>({<span class=\"hljs-selector-tag\">super<\/span><span class=\"hljs-selector-class\">.key<\/span>, <span class=\"hljs-selector-tag\">required<\/span> <span class=\"hljs-selector-tag\">this<\/span><span class=\"hljs-selector-class\">.film<\/span>});<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">  <span class=\"hljs-selector-tag\">final<\/span> <span class=\"hljs-selector-tag\">Film<\/span> <span class=\"hljs-selector-tag\">film<\/span>;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\">  @<span class=\"hljs-selector-tag\">override<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\">  <span class=\"hljs-selector-tag\">State<\/span>&lt;<span class=\"hljs-selector-tag\">DetailsPage<\/span>&gt; <span class=\"hljs-selector-tag\">createState<\/span>() =&gt; <span class=\"hljs-selector-tag\">_DetailsPageState<\/span>();<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\">}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\"><span class=\"hljs-selector-tag\">class<\/span> <span class=\"hljs-selector-tag\">_DetailsPageState<\/span> <span class=\"hljs-selector-tag\">extends<\/span> <span class=\"hljs-selector-tag\">State<\/span>&lt;<span class=\"hljs-selector-tag\">DetailsPage<\/span>&gt; {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\">  <span class=\"hljs-selector-tag\">late<\/span> <span class=\"hljs-selector-tag\">final<\/span> <span class=\"hljs-selector-tag\">Future<\/span>&lt;<span class=\"hljs-selector-tag\">List<\/span>&lt;<span class=\"hljs-selector-tag\">Film<\/span>&gt;&gt; <span class=\"hljs-selector-tag\">relatedFilmsFuture<\/span>;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\">  @<span class=\"hljs-selector-tag\">override<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\">  <span class=\"hljs-selector-tag\">void<\/span> <span class=\"hljs-selector-tag\">initState<\/span>() {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"21\">    <span class=\"hljs-selector-tag\">super<\/span><span class=\"hljs-selector-class\">.initState<\/span>();<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"22\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"23\">                <span class=\"hljs-comment\">\/\/ Create a future that calls the get_related_film function to query<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"24\">                <span class=\"hljs-comment\">\/\/ related movies.<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"25\">    <span class=\"hljs-selector-tag\">relatedFilmsFuture<\/span> = <span class=\"hljs-selector-tag\">supabase<\/span><span class=\"hljs-selector-class\">.rpc<\/span>(<span class=\"hljs-string\">'get_related_film'<\/span>, <span class=\"hljs-attribute\">params<\/span>: {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"26\">      '<span class=\"hljs-selector-tag\">embedding<\/span>': <span class=\"hljs-selector-tag\">widget<\/span><span class=\"hljs-selector-class\">.film<\/span><span class=\"hljs-selector-class\">.embedding<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"27\">      '<span class=\"hljs-selector-tag\">film_id<\/span>': <span class=\"hljs-selector-tag\">widget<\/span><span class=\"hljs-selector-class\">.film<\/span><span class=\"hljs-selector-class\">.id<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"28\">    })<span class=\"hljs-selector-class\">.withConverter<\/span>&lt;<span class=\"hljs-selector-tag\">List<\/span>&lt;<span class=\"hljs-selector-tag\">Film<\/span>&gt;&gt;((data) =&gt;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"29\">        List&lt;Map&lt;String, dynamic&gt;&gt;.<span class=\"hljs-built_in\">from<\/span>(data).<span class=\"hljs-built_in\">map<\/span>(Film.fromJson).<span class=\"hljs-built_in\">toList<\/span>());<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"30\">  }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"31\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"32\">  @<span class=\"hljs-selector-tag\">override<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"33\">  <span class=\"hljs-selector-tag\">Widget<\/span> <span class=\"hljs-selector-tag\">build<\/span>(BuildContext context) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"34\">    <span class=\"hljs-selector-tag\">return<\/span> <span class=\"hljs-selector-tag\">Scaffold<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"35\">      <span class=\"hljs-attribute\">appBar<\/span>: <span class=\"hljs-built_in\">AppBar<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"36\">        <span class=\"hljs-attribute\">title<\/span>: <span class=\"hljs-built_in\">Text<\/span>(widget.film.title),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"37\">      ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"38\">      <span class=\"hljs-attribute\">body<\/span>: <span class=\"hljs-built_in\">ListView<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"39\">        <span class=\"hljs-attribute\">children<\/span>: [<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"40\">          <span class=\"hljs-built_in\">Hero<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"41\">            <span class=\"hljs-attribute\">tag<\/span>: widget.film.imageUrl,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"42\">            <span class=\"hljs-attribute\">child<\/span>: Image.<span class=\"hljs-built_in\">network<\/span>(widget.film.imageUrl),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"43\">          ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"44\">          <span class=\"hljs-built_in\">Padding<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"45\">            <span class=\"hljs-attribute\">padding<\/span>: const EdgeInsets.<span class=\"hljs-built_in\">all<\/span>(<span class=\"hljs-number\">8.0<\/span>),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"46\">            <span class=\"hljs-attribute\">child<\/span>: <span class=\"hljs-built_in\">Column<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"47\">              <span class=\"hljs-attribute\">crossAxisAlignment<\/span>: CrossAxisAlignment.stretch,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"48\">              <span class=\"hljs-attribute\">children<\/span>: [<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"49\">                <span class=\"hljs-built_in\">Text<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"50\">                  DateFormat.<span class=\"hljs-built_in\">yMMMd<\/span>().<span class=\"hljs-built_in\">format<\/span>(widget.film.releaseDate),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"51\">                  <span class=\"hljs-attribute\">style<\/span>: const <span class=\"hljs-built_in\">TextStyle<\/span>(<span class=\"hljs-attribute\">color<\/span>: Colors.grey),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"52\">                ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"53\">                const <span class=\"hljs-built_in\">SizedBox<\/span>(<span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">8<\/span>),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"54\">                <span class=\"hljs-built_in\">Text<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"55\">                  widget.film.overview,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"56\">                  <span class=\"hljs-attribute\">style<\/span>: const <span class=\"hljs-built_in\">TextStyle<\/span>(<span class=\"hljs-attribute\">fontSize<\/span>: <span class=\"hljs-number\">16<\/span>),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"57\">                ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"58\">                const <span class=\"hljs-built_in\">SizedBox<\/span>(<span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">24<\/span>),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"59\">                const <span class=\"hljs-built_in\">Text<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"60\">                  <span class=\"hljs-string\">'You might also like:'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"61\">                  <span class=\"hljs-attribute\">style<\/span>: <span class=\"hljs-built_in\">TextStyle<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"62\">                    <span class=\"hljs-attribute\">fontSize<\/span>: <span class=\"hljs-number\">16<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"63\">                    <span class=\"hljs-attribute\">fontWeight<\/span>: FontWeight.bold,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"64\">                  ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"65\">                ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"66\">              ],<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"67\">            ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"68\">          ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"69\">                                        <span class=\"hljs-comment\">\/\/ Display the list of related movies<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"70\">          FutureBuilder&lt;List&lt;Film&gt;&gt;(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"71\">              <span class=\"hljs-attribute\">future<\/span>: relatedFilmsFuture,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"72\">              <span class=\"hljs-attribute\">builder<\/span>: (context, snapshot) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"73\">                if (snapshot.hasError) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"74\">                  return <span class=\"hljs-built_in\">Center<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"75\">                    <span class=\"hljs-attribute\">child<\/span>: <span class=\"hljs-built_in\">Text<\/span>(snapshot.error.<span class=\"hljs-built_in\">toString<\/span>()),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"76\">                  );<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"77\">                }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"78\">                if (!snapshot.hasData) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"79\">                  return const <span class=\"hljs-built_in\">Center<\/span>(<span class=\"hljs-attribute\">child<\/span>: <span class=\"hljs-built_in\">CircularProgressIndicator<\/span>());<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"80\">                }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"81\">                final films = snapshot.data!;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"82\">                return <span class=\"hljs-built_in\">Wrap<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"83\">                  <span class=\"hljs-attribute\">children<\/span>: films<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"84\">                      .<span class=\"hljs-built_in\">map<\/span>((film) =&gt; <span class=\"hljs-built_in\">InkWell<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"85\">                            <span class=\"hljs-attribute\">onTap<\/span>: () {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"86\">                              Navigator.<span class=\"hljs-built_in\">of<\/span>(context).<span class=\"hljs-built_in\">push<\/span>(<span class=\"hljs-built_in\">MaterialPageRoute<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"87\">                                  <span class=\"hljs-attribute\">builder<\/span>: (context) =&gt;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"88\">                                      <span class=\"hljs-built_in\">DetailsPage<\/span>(<span class=\"hljs-attribute\">film<\/span>: film)));<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"89\">                            },<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"90\">                            <span class=\"hljs-attribute\">child<\/span>: <span class=\"hljs-built_in\">FractionallySizedBox<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"91\">                              <span class=\"hljs-attribute\">widthFactor<\/span>: <span class=\"hljs-number\">0.5<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"92\">                              <span class=\"hljs-attribute\">child<\/span>: <span class=\"hljs-built_in\">FilmCell<\/span>(<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"93\">                                <span class=\"hljs-attribute\">film<\/span>: film,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"94\">                                <span class=\"hljs-attribute\">isHeroEnabled<\/span>: false,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"95\">                                <span class=\"hljs-attribute\">fontSize<\/span>: <span class=\"hljs-number\">16<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"96\">                              ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"97\">                            ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"98\">                          ))<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"99\">                      .<span class=\"hljs-built_in\">toList<\/span>(),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"100\">                );<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"101\">              }),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"102\">        ],<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"103\">      ),<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"104\">    );<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"105\">  }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"106\">}<\/span>\n<\/code><\/pre>\n<p>\u6211\u4eec\u73b0\u5728\u6709\u4e00\u4e2a\u529f\u80fd\u6b63\u5e38\u7684\u76f8\u4f3c\u6027\u63a8\u8350\u7cfb\u7edf\uff0c\u8be5\u7cfb\u7edf\u7531 Open AI \u63d0\u4f9b\u652f\u6301\uff0c\u5185\u7f6e\u5728\u6211\u4eec\u7684 Flutter \u5e94\u7528\u7a0b\u5e8f\u4e2d\u3002\u4eca\u5929\u4f7f\u7528\u7684\u4e0a\u4e0b\u6587\u662f\u7535\u5f71\uff0c\u4f46\u4f60\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u60f3\u8c61\u76f8\u540c\u7684\u6982\u5ff5\u4e5f\u53ef\u4ee5\u5e94\u7528\u4e8e\u5176\u4ed6\u7c7b\u578b\u7684\u5185\u5bb9\u3002<\/p>\n<h1 data-id=\"heading-10\">\u603b\u7ed3<\/h1>\n<p>\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u7814\u7a76\u4e86\u5982\u4f55\u62cd\u6444\u4e00\u90e8\u7535\u5f71\uff0c\u5e76\u63a8\u8350\u4e86\u4e0e\u6240\u9009\u7535\u5f71\u76f8\u4f3c\u7684\u7535\u5f71\u5217\u8868\u3002\u8fd9\u5f88\u6709\u6548\uff0c\u4f46\u6211\u4eec\u53ea\u6709\u4e00\u4e2a\u6837\u672c\u53ef\u4ee5\u4ece\u4e2d\u83b7\u5f97\u76f8\u4f3c\u6027\u3002\u5982\u679c\u6211\u4eec\u60f3\u6839\u636e\u7528\u6237\u8fc7\u53bb\u89c2\u770b\u7684 10 \u90e8\u7535\u5f71\u63a8\u8350\u8981\u89c2\u770b\u7684\u7535\u5f71\u5217\u8868\uff0c\u8be5\u600e\u4e48\u529e\uff1f\u6709\u591a\u79cd\u65b9\u6cd5\u53ef\u4ee5\u89e3\u51b3\u8fd9\u6837\u7684\u95ee\u9898\uff0c\u6211\u5e0c\u671b\u901a\u8bfb\u8fd9\u7bc7\u6587\u7ae0\u80fd\u6fc0\u53d1\u4f60\u7684\u6c42\u77e5\u6b32\u6765\u89e3\u51b3\u8fd9\u6837\u7684\u95ee\u9898\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fdshukertjr%2Fexamples%2Ftree%2Fmain%2Fmovie-recommendation\" target=\"_blank\" title=\"https:\/\/github.com\/dshukertjr\/examples\/tree\/main\/movie-recommendation\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">\u672c\u6587\u4e2d\u5e94\u7528\u7684\u5b8c\u6574\u4ee3\u7801\u5e93<\/a><\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.memfiredb.com%2F%3Ffrom%3DXIMgJh\" target=\"_blank\" title=\"https:\/\/www.memfiredb.com\/?from=XIMgJh\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">\u56fd\u5185\u7248supabase\u5de5\u5177MemFire Cloud<\/a><\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fsupabase.com%2Fblog%2Fmatryoshka-embeddings\" target=\"_blank\" title=\"https:\/\/supabase.com\/blog\/matryoshka-embeddings\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">\u4fc4\u7f57\u65af\u5957\u5a03\u5d4c\u5165\uff1a\u4f7f\u7528\u81ea\u9002\u5e94\u68c0\u7d22\u5b9e\u73b0\u66f4\u5feb\u7684 OpenAI \u5411\u91cf\u641c\u7d22<\/a><\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fsupabase.com%2Fdocs%2Fguides%2Fdatabase%2Fextensions%2Fpgvector\" target=\"_blank\" title=\"https:\/\/supabase.com\/docs\/guides\/database\/extensions\/pgvector\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">Supabase pgvector \u6307\u5357<\/a><\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fsupabase.com%2Fdocs%2Fguides%2Fdatabase%2Fextensions%2Fpgvector\" target=\"_blank\" title=\"https:\/\/supabase.com\/docs\/guides\/database\/extensions\/pgvector\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">\u4f7f\u7528 pgvector \u5c06 OpenAI \u5d4c\u5165\u5b58\u50a8\u5728 Postgres \u4e2d<\/a><\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F685967989\" target=\"_blank\" title=\"https:\/\/zhuanlan.zhihu.com\/p\/685967989\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">pgvector\u5728\u6587\u672c\u641c\u7d22\u4e2d\u7684\u9769\u547d<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>\u5411\u7528\u6237\u63a8\u8350\u76f8\u5173\u5185\u5bb9\u5bf9\u4e8e\u4fdd\u6301\u7528\u6237\u5bf9\u5e94\u7528\u7a0b\u5e8f\u7684\u5174\u8da3\u81f3\u5173\u91cd\u8981\u3002\u5c3d\u7ba1\u8fd9\u662f\u6211\u4eec\u5e0c\u671b\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u62e5\u6709\u7684\u5e38\u89c1\u529f\u80fd\uff0c\u4f46\u6784\u5efa\u5b83\u5e76\u4e0d\u7b80\u5355\u3002\u968f\u7740\u77e2\u91cf\u6570\u636e\u5e93\u548c\u5f00\u653e\u4eba\u5de5\u667a\u80fd\u7684\u51fa\u73b0\uff0c\u8fd9\u79cd\u60c5\u51b5\u53d1\u751f\u4e86\u53d8\u5316\u3002\u4eca\u5929\uff0c\u6211\u4eec\u53ea\u9700\u5bf9\u5411\u91cf\u6570\u636e\u5e93<\/p>\n","protected":false},"author":1,"featured_media":11779,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","views":"11","footnotes":""},"categories":[3],"tags":[126,127,128,129,136],"collection":[],"class_list":["post-1774","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fenlei2","tag-gpt","tag-ai","tag-128","tag-129","tag-136"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts\/1774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/comments?post=1774"}],"version-history":[{"count":0,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts\/1774\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/media\/11779"}],"wp:attachment":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/media?parent=1774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/categories?post=1774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/tags?post=1774"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/collection?post=1774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}