feat: daily motto

functions/api/motto.js

@@ -0,0 +1,25 @@
+import { verifyJWT } from '../middleware/auth';
+import { createErrorResponse, createSuccessResponse } from '../utils';
+
+export async function onRequestGet(context) {
+  try {
+    // Verify the JWT token
+    const authResult = await verifyJWT(context);
+    if (authResult) {
+      return authResult; // Return the error response from the middleware
+    }
+
+    // Use Cloudflare AI Gateway to proxy the request to Google AI Studio
+    const ai = context.env.AI;
+
+    const input = { prompt: '用繁體中文生成一句名言佳句' };
+
+    const response = await ai.run('@cf/meta/llama-3.2-1b-instruct', input);
+    const motto = response.response;
+
+    return createSuccessResponse({ motto });
+  } catch (error) {
+    console.error("Gen motto error:", error);
+    return createErrorResponse("Get motto failed", 500);
+  }
+}

src/lib/api.js

@@ -173,3 +173,28 @@ export async function uploadAvatar(avatar, jwt) {
   const data = await response.json();
   return data;
 }
+
+export async function generateMotto(jwt) {
+  try {
+    const response = await fetch('/api/motto', {
+      headers: {
+        'Authorization': `Bearer ${jwt}`,
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        unauthRedirectToLogin();
+        return;
+      }
+      const error = await response.json();
+      throw new Error(error.error || 'Generating motto failed');
+    }
+
+    const data = await response.json();
+    return data.motto;
+  } catch {
+    console.error('Error generating motto:', error);
+    throw new Error('Failed to generate motto');
+  }
+}

src/router/index.js

@@ -6,6 +6,7 @@ import AboutView from '../views/AboutView.vue';
 import LoginView from '../views/LoginView.vue';
 import ProfileView from '../views/ProfileView.vue';
 import RegisterView from '../views/RegisterView.vue';
+import DailyMottoView from '../views/DailyMottoView.vue';
 
 const routes = [
   {
@@ -62,6 +63,16 @@ const routes = [
       showInNav: false,
       navName: '個人資料'
     }
+  },
+  {
+    path: '/daily-motto',
+    name: 'DailyMotto',
+    component: DailyMottoView,
+    meta: {
+      keepAlive: true,
+      showInNav: true,
+      navName: '每日名言佳句'
+    }
   }
 ];
 

src/views/DailyMottoView.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { generateMotto as generateMottoApi } from '../lib/api';
+import { useAuthStore } from '../stores/auth';
+
+const motto = ref('');
+const mottoLoading = ref(false);
+
+const authStore = useAuthStore();
+
+const generateMotto = async () => {
+  mottoLoading.value = true;
+
+  try {
+    const generatedMotto = await generateMottoApi(authStore.jwt);
+    motto.value = generatedMotto;
+  } catch (error) {
+    console.error(error);
+    alert('Failed to generate motto.');
+  }
+
+  mottoLoading.value = false;
+};
+</script>
+
+<template>
+  <div class="ts-app-center">
+    <div class="ts-box ts-content is-center-aligned">
+      <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
+      <p class="ts-text">Powered By Cloudflare Workers AI</p>
+      <button class="ts-button" @click="generateMotto">生成</button>
+      <p class="ts-text">每日金句:</p>
+      <p class="ts-text">{{ motto }}</p>
+    </div>
+  </div>
+</template>

wrangler.toml

@@ -15,3 +15,6 @@ database_id = "a2088769-aab4-44be-b24e-25c8762f0e80"
 [[r2_buckets]]
 binding = "MY_BUCKET"
 bucket_name = "ntu-padn-mid-web"
+
+[ai]
+binding = "AI"