Merge pull request #310 from open-edge-platform/update-branch

fix: Update last commit message output to append to GITHUB_OUTPUT (#836)

Author: gooishin

usecases/ai/edge-ai-demo-studio/frontend/package-lock.json

@@ -11,8 +11,8 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@ai-sdk/openai-compatible": "^1.0.22",
-    "@ai-sdk/react": "^2.0.76",
+    "@ai-sdk/openai-compatible": "^1.0.25",
+    "@ai-sdk/react": "^2.0.86",
     "@payloadcms/db-sqlite": "^3.61.1",
     "@payloadcms/next": "^3.61.1",
     "@payloadcms/richtext-lexical": "^3.61.1",
@@ -30,15 +30,17 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@tanstack/react-query": "^5.90.5",
+    "@tanstack/react-query": "^5.90.6",
     "@types/mdx": "^2.0.13",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "ai": "^5.0.76",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "graphql": "^16.11.0",
     "hast-util-to-jsx-runtime": "^2.3.6",
-    "lucide-react": "^0.545.0",
+    "lucide-react": "^0.552.0",
     "next": "^15.5.4",
     "next-themes": "^0.4.6",
     "openai": "^6.7.0",
@@ -56,7 +58,7 @@
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
     "@tanstack/react-query-devtools": "^5.90.2",
-    "@types/node": "^24.8.1",
+    "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19",
     "concurrently": "^9.2.1",
@@ -98,4 +100,4 @@
       }
     }
   }
-}
+}

usecases/ai/edge-ai-demo-studio/frontend/package.json

@@ -0,0 +1,18 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+'use client'
+
+import { ReactNode } from 'react'
+
+interface SampleLayoutProps {
+  children: ReactNode
+}
+
+export default function SampleLayout({ children }: SampleLayoutProps) {
+  return (
+    <div className="flex h-screen w-screen flex-col bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      {children}
+    </div>
+  )
+}

usecases/ai/edge-ai-demo-studio/frontend/src/app/(frontend)/(samples)/layout.tsx

@@ -0,0 +1,117 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+'use client'
+
+import { MessageSquare } from 'lucide-react'
+import { useCallback, useMemo, useState } from 'react'
+import {
+  getInactivePrerequisites,
+  getPreparingPrerequisites,
+  startPrerequisites,
+} from '@/utils/prerequisite-utils'
+import {
+  useCreateWorkload,
+  useGetWorkloadsStatus,
+  useUpdateWorkload,
+} from '@/hooks/use-workload'
+import { ChatPanel, RagChatSettings } from '@/components/samples/rag-chat'
+import { Badge } from '@/components/ui/badge'
+import { KnowledgeBase } from '@/types/embedding'
+import { TEXT_GENERATION_WORKLOAD } from '@/lib/workloads/text-generation'
+import { SampleHeader, PrerequisiteBanner } from '@/components/samples'
+
+export default function RagChatPage() {
+  const { data: workloads, isLoading: isWorkloadsLoading } =
+    useGetWorkloadsStatus()
+  const createWorkload = useCreateWorkload()
+  const updateWorkload = useUpdateWorkload()
+
+  const [useEmbedding, setUseEmbedding] = useState(false)
+  const [selectedKnowledgeBase, setSelectedKnowledgeBase] =
+    useState<KnowledgeBase | null>(null)
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+
+  const prerequisiteServices = useMemo(() => {
+    const ps = ['text-generation', 'embedding']
+    return ps
+  }, [])
+
+  const handleSettingsUpdate = (settings: {
+    useEmbedding: boolean
+    selectedKnowledgeBase: KnowledgeBase | null
+  }) => {
+    setUseEmbedding(settings.useEmbedding)
+    setSelectedKnowledgeBase(settings.selectedKnowledgeBase)
+  }
+
+  const inactivePrerequisites = useMemo(() => {
+    return getInactivePrerequisites(prerequisiteServices, workloads)
+  }, [prerequisiteServices, workloads])
+
+  const preparingPrerequisites = useMemo(() => {
+    return getPreparingPrerequisites(prerequisiteServices, workloads)
+  }, [prerequisiteServices, workloads])
+
+  const preparePrerequisite = useCallback(() => {
+    startPrerequisites(
+      prerequisiteServices,
+      workloads,
+      createWorkload,
+      updateWorkload,
+    )
+  }, [createWorkload, prerequisiteServices, updateWorkload, workloads])
+
+  const isDisabled =
+    inactivePrerequisites.length > 0 ||
+    (preparingPrerequisites && preparingPrerequisites.length > 0)
+
+  return (
+    <>
+      <SampleHeader
+        icon={MessageSquare}
+        title="RAG Chat"
+        description="Chat with AI using Retrieval-Augmented Generation for context-aware responses"
+        onOpenSettings={() => setIsSettingsOpen(true)}
+        disabled={isDisabled}
+        badge={
+          selectedKnowledgeBase ? (
+            <Badge
+              variant="secondary"
+              className="flex items-center gap-1.5 border-blue-200 bg-blue-100 px-3 py-1 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-200"
+            >
+              <div className="h-2 w-2 animate-pulse rounded-full bg-blue-500"></div>
+              RAG On • {selectedKnowledgeBase.name}
+            </Badge>
+          ) : undefined
+        }
+      />
+
+      <PrerequisiteBanner
+        inactivePrerequisites={inactivePrerequisites}
+        preparingPrerequisites={preparingPrerequisites}
+        isLoading={isWorkloadsLoading}
+        onStart={preparePrerequisite}
+        isStarting={createWorkload.isPending || updateWorkload.isPending}
+      />
+
+      <div className="flex flex-1 flex-col overflow-hidden p-6">
+        <div className="mx-auto flex h-full w-full max-w-5xl flex-col overflow-hidden rounded-lg border bg-white shadow-lg dark:bg-slate-900">
+          <ChatPanel
+            disabled={isDisabled}
+            knowledgeBaseId={selectedKnowledgeBase?.id || undefined}
+            selectedModel={TEXT_GENERATION_WORKLOAD.model}
+          />
+        </div>
+      </div>
+
+      <RagChatSettings
+        isOpen={isSettingsOpen}
+        onClose={() => setIsSettingsOpen(false)}
+        useEmbedding={useEmbedding}
+        selectedKnowledgeBase={selectedKnowledgeBase}
+        onSettingsUpdate={handleSettingsUpdate}
+      />
+    </>
+  )
+}

usecases/ai/edge-ai-demo-studio/frontend/src/app/(frontend)/(samples)/rag/page.tsx

@@ -0,0 +1,43 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import type React from 'react'
+import type { Metadata } from 'next'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/components/ui/sidebar'
+import { Separator } from '@/components/ui/separator'
+import { AppSidebar } from '@/components/sidebar'
+
+export const metadata: Metadata = {
+  title: 'Edge AI Demo Studio - AI at the Edge, Everywhere',
+  description:
+    'Deploy powerful AI models directly in browsers and edge devices. Text generation, speech processing, and image generation with edge-first design.',
+}
+
+export default function ServicesLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <div className="flex items-center gap-2">
+            <span className="font-semibold">Edge AI Demo Studio</span>
+          </div>
+        </header>
+        <main className="flex flex-1 justify-center bg-gradient-to-br from-slate-50 to-slate-100 px-4">
+          <div className="flex w-full max-w-[1200px]">{children}</div>
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

usecases/ai/edge-ai-demo-studio/frontend/src/app/(frontend)/(services)/layout.tsx

@@ -0,0 +1,142 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { EMBEDDING_PORT, TEXT_GENERATION_PORT } from '@/lib/constants'
+import { OVMSModelConfig } from '@/types/chat_model'
+import { createOpenAICompatible } from '@ai-sdk/openai-compatible'
+import {
+  UIMessage,
+  convertToModelMessages,
+  extractReasoningMiddleware,
+  streamText,
+  wrapLanguageModel,
+} from 'ai'
+
+// Configuration constants
+const createDefaultSystemPrompt = () => {
+  return `/no_think You are a human-like conversational AI. 
+Your goal is to communicate in a way that is natural, empathetic, and engaging. 
+Prioritize clarity and warmth in your responses.
+You only reply in plain natural language, Do not produce any HIGHLIGHT, Markdown format, programming codes, formatted structured output`
+}
+
+async function getAvailableModel(): Promise<string> {
+  const response = await fetch(
+    `http://localhost:${TEXT_GENERATION_PORT}/v1/config`,
+  )
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch model configuration')
+  }
+
+  const models: OVMSModelConfig = await response.json()
+
+  const availableModel = Object.keys(models).find((modelName) => {
+    const model = models[modelName]
+    return model.model_version_status[0]?.state === 'AVAILABLE'
+  })
+
+  if (!availableModel) {
+    throw new Error('No available model found')
+  }
+
+  return availableModel
+}
+
+const createRAGContextPrompt = async (
+  knowledgeBaseId: number,
+  query: string,
+) => {
+  const searchParams = {
+    query,
+    search_type: 'similarity',
+    top_k: 4,
+    top_n: 3,
+  }
+
+  try {
+    const sanitizedURL = new URL(
+      `http://localhost:${EMBEDDING_PORT}/v1/kb/${knowledgeBaseId}/search`,
+    )
+    const response = await fetch(sanitizedURL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(searchParams),
+    })
+
+    if (!response.ok) {
+      throw new Error(`Search failed with status: ${response.status}`)
+    }
+
+    const searchResults = await response.json()
+
+    // Create system message with RAG context
+    const contextContent = searchResults
+      .map((result: { content: string }) => result.content)
+      .join('\n\n---\n\n')
+
+    const systemMessage = `/no_think
+Use the following pieces of retrieved context to answer the question. 
+If you don't know the answer, just say that you do not know the answer.
+
+Context: ${contextContent}
+Answer:`
+    return systemMessage
+  } catch (error) {
+    console.error('RAG search error:', error)
+    // Return default system prompt if search fails
+    return createDefaultSystemPrompt()
+  }
+}
+
+export async function POST(req: Request) {
+  const {
+    messages,
+    knowledgeBaseId,
+  }: {
+    messages: UIMessage[]
+    knowledgeBaseId: number
+  } = await req.json()
+
+  // Get available model
+  let model: string
+  try {
+    model = await getAvailableModel()
+  } catch (error) {
+    console.error('Model service error:', error)
+    return new Response('No available model', { status: 500 })
+  }
+
+  // Create OpenAI compatible provider
+  const provider = createOpenAICompatible({
+    baseURL: `http://localhost:${TEXT_GENERATION_PORT}/v3`,
+    name: 'ovms',
+  })
+
+  const ragContext = knowledgeBaseId
+    ? await createRAGContextPrompt(
+        knowledgeBaseId,
+        messages[messages.length - 1].parts
+          .map((part) => {
+            if (part.type === 'text') return part.text
+            else return ''
+          })
+          .join(''),
+      )
+    : undefined
+
+  const wrappedModel = wrapLanguageModel({
+    model: provider(model),
+    middleware: extractReasoningMiddleware({ tagName: 'think' }),
+  })
+
+  const result = streamText({
+    model: wrappedModel,
+    system: ragContext ?? createDefaultSystemPrompt(),
+    messages: convertToModelMessages(messages),
+  })
+
+  return result.toUIMessageStreamResponse()
+}