Update article generation and use langfuse

package-lock.json

@@ -11,6 +11,7 @@
         "@ai-sdk/openai": "^2.0.0",
         "@ai-sdk/react": "^2.0.1",
         "@hookform/resolvers": "^5.2.1",
+        "@langfuse/client": "^4.0.1",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-label": "^2.1.7",
@@ -659,6 +660,23 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@langfuse/client": {
+      "version": "4.0.1",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@langfuse/client/-/client-4.0.1.tgz",
+      "integrity": "sha512-aeY8VX8zR4DyNQ58sMyWW5xI3KqJ4zfi/TReJORTLkxx8WTSuEnyiFdj6gXDO9bzBXRexJkq2l9tCAldUyp4xQ==",
+      "dependencies": {
+        "@langfuse/core": "^4.0.1",
+        "mustache": "^4.2.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.9.0"
+      }
+    },
+    "node_modules/@langfuse/core": {
+      "version": "4.0.1",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@langfuse/core/-/core-4.0.1.tgz",
+      "integrity": "sha512-+KfFvFzt1yFrFH+U18Q5GMNihGbxt/ApJhHD0n/RsffTb23yFUZz1Ya7Sl/3YRZzSmWDuTWHePAHSTRrCylzTQ=="
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -4570,6 +4588,14 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "node_modules/mustache": {
+      "version": "4.2.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "bin": {
+        "mustache": "bin/mustache"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/nanoid/-/nanoid-3.3.11.tgz",

package.json

@@ -12,6 +12,7 @@
     "@ai-sdk/openai": "^2.0.0",
     "@ai-sdk/react": "^2.0.1",
     "@hookform/resolvers": "^5.2.1",
+    "@langfuse/client": "^4.0.1",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",

src/app/api/generate-article/route.ts

@@ -1,6 +1,7 @@
 import { openai } from '@ai-sdk/openai';
 import { generateText } from 'ai';
-import { generateQuizPrompt } from '@/prompts/prompt-management';
+import { langfuse } from '@/lib/langfuse';
+import { AI_CONFIG } from '@/config/ai';
 
 export async function POST(req: Request) {
   try {
@@ -14,19 +15,20 @@ export async function POST(req: Request) {
       inputArticle 
     } = await req.json();
 
-    // Generate the article using the article-generation prompt
-    const prompt = generateQuizPrompt({
-      gradeValues: grade.join(', '),
-      unitValues: unit.join(', '),
-      textbookVocabValues: textbookVocab,
-      additionalVocabValues: additionalVocab,
-      grammarValues: grammar.join(', '),
-      topicValues: topic.join(', '),
-      inputArticleValue: inputArticle
-    }, 'article-generation');
+    // Get the prompt from Langfuse (FREE - no cost for prompt management)
+    const langfusePrompt = await langfuse.prompt.get('article/generation');
+    
+    // Replace placeholders with actual values
+    const prompt = langfusePrompt.prompt
+      .replace(/\{\{grade_values\}\}/g, grade.join(', '))
+      .replace(/\{\{unit_values\}\}/g, unit.join(', '))
+      .replace(/\{\{textbook_vocab_values\}\}/g, textbookVocab)
+      .replace(/\{\{additional_vocab_values\}\}/g, additionalVocab)
+      .replace(/\{\{grammar_values\}\}/g, grammar.join(', '))
+      .replace(/\{\{topic_values\}\}/g, topic.join(', '));
 
     const result = await generateText({
-      model: openai('gpt-4o-mini'),
+      model: openai(AI_CONFIG.model),
       prompt: prompt,
     });
 

src/app/page.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useChat } from '@ai-sdk/react';
 import { QuestionParameterForm } from '@/components/question-creation';
 import { QuestionList } from '@/components/question-output';
-import { SourceArticle } from '@/components/source-article';
+import { Article } from '@/components/article';
 import { QuestionType, QuestionParameters, GeneratedQuestion } from '@/types/quiz';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -257,7 +257,7 @@ export default function QuestionBuilder() {
         {/* Right side: Two-panel stack */}
         <div className="flex-1 flex flex-col">
           {/* Upper Right Panel: Source Article Editor */}
-          <SourceArticle
+          <Article
             className="h-1/2"
             sourceArticle={sourceArticle}
             onSourceArticleChange={setSourceArticle}

src/components/{source-article/SourceArticle.tsx → article/Article.tsx}

@@ -8,7 +8,7 @@ import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
-interface SourceArticleProps {
+interface ArticleProps {
   className?: string;
   sourceArticle: string;
   onSourceArticleChange: (text: string) => void;
@@ -16,13 +16,14 @@ interface SourceArticleProps {
   onSourceLockedChange: (locked: boolean) => void;
 }
 
-export function SourceArticle({
+export function Article({
   className = '',
   sourceArticle,
   onSourceArticleChange,
   isSourceLocked,
   onSourceLockedChange,
-}: SourceArticleProps) {
+}: ArticleProps) {
+
   const [wordCount, setWordCount] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isGeneratingArticle, setIsGeneratingArticle] = useState(false);
@@ -51,7 +52,7 @@ export function SourceArticle({
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(params),
       });
-      
+
       if (response.ok) {
         const { article } = await response.json();
         onSourceArticleChange(article);
@@ -95,7 +96,7 @@ export function SourceArticle({
           </div>
         </div>
       </CardHeader>
-      
+
       <CardContent className="h-[calc(100%-80px)]">
         <Textarea
           value={sourceArticle}

src/components/{source-article → article}/ArticleGenerationModal.tsx

@@ -10,10 +10,10 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { CheckboxField } from '@/components/ui/checkbox-field';
 import { Loader2 } from 'lucide-react';
 
 interface ArticleGenerationModalProps {
@@ -129,78 +129,37 @@ export function ArticleGenerationModal({
             Configure the parameters for article generation
           </DialogDescription>
         </DialogHeader>
-        
+
         <ScrollArea className="h-[calc(90vh-200px)] pr-4">
           <form onSubmit={handleSubmit} className="space-y-6">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {/* Publisher */}
-              <div>
-                <Label className="mb-2">出版社 (Publisher)</Label>
-                <div className="space-y-2">
-                  {PUBLISHER_OPTIONS.map(option => (
-                    <div key={option} className="flex items-center space-x-2">
-                      <Checkbox
-                        id={`publisher-${option}`}
-                        checked={formData.publisher.includes(option)}
-                        onCheckedChange={() => handleCheckboxChange('publisher', option)}
-                      />
-                      <Label 
-                        htmlFor={`publisher-${option}`}
-                        className="text-sm font-normal cursor-pointer"
-                      >
-                        {option}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Grade */}
-              <div>
-                <Label className="mb-2">學生年級 (Grade Level)</Label>
-                <div className="space-y-2">
-                  {GRADE_OPTIONS.map(option => (
-                    <div key={option} className="flex items-center space-x-2">
-                      <Checkbox
-                        id={`grade-${option}`}
-                        checked={formData.grade.includes(option)}
-                        onCheckedChange={() => handleCheckboxChange('grade', option)}
-                      />
-                      <Label 
-                        htmlFor={`grade-${option}`}
-                        className="text-sm font-normal cursor-pointer"
-                      >
-                        {option}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-              </div>
+              <CheckboxField
+                label="出版社 (Publisher)"
+                fieldName="publisher"
+                value={formData.publisher}
+                onChange={(value: string) => handleCheckboxChange('publisher', value)}
+                options={PUBLISHER_OPTIONS}
+                columns={1}
+              />
+              <CheckboxField
+                label="學生年級 (Grade Level)"
+                fieldName="grade"
+                value={formData.grade}
+                onChange={(value: string) => handleCheckboxChange('grade', value)}
+                options={GRADE_OPTIONS}
+                columns={1}
+              />
             </div>
 
-            {/* Unit */}
-            <div>
-              <Label className="mb-2">課程範圍 (Unit Range)</Label>
-              <div className="grid grid-cols-3 gap-2">
-                {UNIT_OPTIONS.map(option => (
-                  <div key={option} className="flex items-center space-x-2">
-                    <Checkbox
-                      id={`unit-${option}`}
-                      checked={formData.unit.includes(option)}
-                      onCheckedChange={() => handleCheckboxChange('unit', option)}
-                    />
-                    <Label 
-                      htmlFor={`unit-${option}`}
-                      className="text-sm font-normal cursor-pointer"
-                    >
-                      {option}
-                    </Label>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <CheckboxField
+              label="課程範圍 (Unit Range)"
+              fieldName="unit"
+              value={formData.unit}
+              onChange={(value: string) => handleCheckboxChange('unit', value)}
+              options={UNIT_OPTIONS}
+              columns={3}
+            />
 
-            {/* Textbook Vocabulary */}
             <div>
               <Label htmlFor="textbook-vocab" className="mb-2">
                 課本單字列表 (Textbook Vocabulary)
@@ -213,8 +172,6 @@ export function ArticleGenerationModal({
                 className="bg-muted"
               />
             </div>
-
-            {/* Additional Vocabulary */}
             <div>
               <Label htmlFor="additional-vocab" className="mb-2">
                 額外單字列表 (Additional Vocabulary)
@@ -228,52 +185,24 @@ export function ArticleGenerationModal({
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {/* Grammar */}
-              <div>
-                <Label className="mb-2">文法範圍 (Grammar Focus)</Label>
-                <div className="space-y-2">
-                  {GRAMMAR_OPTIONS.map(option => (
-                    <div key={option} className="flex items-center space-x-2">
-                      <Checkbox
-                        id={`grammar-${option}`}
-                        checked={formData.grammar.includes(option)}
-                        onCheckedChange={() => handleCheckboxChange('grammar', option)}
-                      />
-                      <Label 
-                        htmlFor={`grammar-${option}`}
-                        className="text-sm font-normal cursor-pointer"
-                      >
-                        {option}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Topic */}
-              <div>
-                <Label className="mb-2">主題範圍 (Topic)</Label>
-                <div className="space-y-2">
-                  {TOPIC_OPTIONS.map(option => (
-                    <div key={option} className="flex items-center space-x-2">
-                      <Checkbox
-                        id={`topic-${option}`}
-                        checked={formData.topic.includes(option)}
-                        onCheckedChange={() => handleCheckboxChange('topic', option)}
-                      />
-                      <Label 
-                        htmlFor={`topic-${option}`}
-                        className="text-sm font-normal cursor-pointer"
-                      >
-                        {option}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-              </div>
+              <CheckboxField
+                label="文法範圍 (Grammar Focus)"
+                fieldName="grammar"
+                value={formData.grammar}
+                onChange={(value: string) => handleCheckboxChange('grammar', value)}
+                options={GRAMMAR_OPTIONS}
+                columns={1}
+              />
+              <CheckboxField
+                label="主題範圍 (Topic)"
+                fieldName="topic"
+                value={formData.topic}
+                onChange={(value: string) => handleCheckboxChange('topic', value)}
+                options={TOPIC_OPTIONS}
+                columns={1}
+              />
             </div>
 
-            {/* Input Article */}
             <div>
               <Label htmlFor="input-article" className="mb-2">
                 初始文章 (Initial Article)
@@ -293,8 +222,8 @@ export function ArticleGenerationModal({
           <Button type="button" variant="outline" onClick={onClose}>
             Cancel
           </Button>
-          <Button 
-            type="submit" 
+          <Button
+            type="submit"
             onClick={handleSubmit}
             disabled={isGenerating}
           >

src/components/{source-article → article}/index.ts

@@ -1,2 +1,2 @@
-export { SourceArticle } from './SourceArticle';
+export { Article } from './Article';
 export { ArticleGenerationModal } from './ArticleGenerationModal';

src/components/ui/checkbox-field.tsx

@@ -0,0 +1,35 @@
+import { Label } from '@/components/ui/label';
+import { CheckboxGrid } from '@/components/ui/checkbox-grid';
+
+interface CheckboxFieldProps {
+  label: string;
+  fieldName: string;
+  value: string[];
+  onChange: (value: string) => void;
+  options: string[];
+  columns?: 1 | 2 | 3 | 4;
+  className?: string;
+}
+
+export function CheckboxField({
+  label,
+  fieldName,
+  value,
+  onChange,
+  options,
+  columns = 1,
+  className = ''
+}: CheckboxFieldProps) {
+  return (
+    <div className={className}>
+      <Label className="mb-2">{label}</Label>
+      <CheckboxGrid
+        options={options}
+        selectedValues={value}
+        onSelectionChange={onChange}
+        fieldName={fieldName}
+        columns={columns}
+      />
+    </div>
+  );
+}

src/components/ui/checkbox-grid.tsx

@@ -0,0 +1,41 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+interface CheckboxGridProps {
+  options: string[];
+  selectedValues: string[];
+  onSelectionChange: (value: string) => void;
+  fieldName: string;
+  columns?: 1 | 2 | 3 | 4;
+  className?: string;
+}
+
+export function CheckboxGrid({
+  options,
+  selectedValues,
+  onSelectionChange,
+  fieldName,
+  columns = 1,
+  className = ''
+}: CheckboxGridProps) {
+  return (
+    <div className={`grid grid-cols-${columns} gap-2 ${className}`}>
+      {options.map(option => (
+        <div key={option} className="flex items-center space-x-2">
+          <Checkbox
+            id={`${fieldName}-${option}`}
+            checked={selectedValues.includes(option)}
+            onCheckedChange={() => onSelectionChange(option)}
+          />
+          <Label
+            htmlFor={`${fieldName}-${option}`}
+            className="text-sm font-normal cursor-pointer"
+          >
+            {option}
+          </Label>
+        </div>
+      ))}
+    </div>
+  );
+}
+

src/components/ui/checkbox-group.tsx

@@ -0,0 +1,35 @@
+import { Label } from '@/components/ui/label';
+import { CheckboxGrid } from '@/components/ui/checkbox-grid';
+
+interface CheckboxFieldProps {
+  label: string;
+  fieldName: string;
+  value: string[];
+  onChange: (value: string) => void;
+  options: string[];
+  columns?: 1 | 2 | 3 | 4;
+  className?: string;
+}
+
+export function CheckboxField({
+  label,
+  fieldName,
+  value,
+  onChange,
+  options,
+  columns = 1,
+  className = ''
+}: CheckboxFieldProps) {
+  return (
+    <div className={className}>
+      <Label className="mb-2">{label}</Label>
+      <CheckboxGrid
+        options={options}
+        selectedValues={value}
+        onSelectionChange={onChange}
+        fieldName={fieldName}
+        columns={columns}
+      />
+    </div>
+  );
+}

src/config/ai.ts

@@ -0,0 +1,5 @@
+export const AI_CONFIG = {
+  model: 'gpt-4o-mini',
+  temperature: 0.7,
+  maxTokens: 1000,
+} as const;

src/lib/langfuse.ts

@@ -0,0 +1,19 @@
+import { LangfuseClient } from "@langfuse/client";
+
+// Ensure this is never imported on the client
+if (typeof window !== "undefined") {
+  throw new Error("`langfuse` must only be used on the server side.");
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __langfuse__: LangfuseClient | undefined;
+}
+
+export const langfuse = globalThis.__langfuse__ ?? new LangfuseClient({
+  publicKey: process.env.LANGFUSE_PUBLIC_KEY,
+  secretKey: process.env.LANGFUSE_SECRET_KEY,
+  baseUrl: process.env.LANGFUSE_BASE_URL || "https://cloud.langfuse.com",
+});
+
+if (!globalThis.__langfuse__) globalThis.__langfuse__ = langfuse;