+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/progress/progress-bar.tsx b/src/app/interface/progress/progress-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..077e34e60a1a055a68740215e336fd8adb5ca1fe
--- /dev/null
+++ b/src/app/interface/progress/progress-bar.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { CircularProgressbar, buildStyles } from "react-circular-progressbar"
+import "react-circular-progressbar/dist/styles.css"
+
+export function ProgressBar ({
+ className,
+ progressPercentage,
+ text
+}: {
+ className?: string
+ progressPercentage?: number
+ text?: string
+}) {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/top-menu/index.tsx b/src/app/interface/top-menu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4be0f4520492591c5a229a4836ba67fb1e1e128e
--- /dev/null
+++ b/src/app/interface/top-menu/index.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+
+export function TopMenu() {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..28151e2ea2a3bbd44e001cc753cc53702f290339
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,24 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+ title: 'Idfx',
+ description: 'Idfx',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/main.tsx b/src/app/main.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..673723f37bc6901afeca0976c0b7eeb74214d127
--- /dev/null
+++ b/src/app/main.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { useState, useTransition } from "react"
+import { format } from "date-fns"
+
+import Observer from "./observer"
+import { cn } from "@/lib/utils"
+import { think } from "./engine/think"
+import { Progress } from "./interface/progress"
+
+export default function Main() {
+ const [_isPending, startTransition] = useTransition()
+ const [lastImage, setLastImage] = useState
+ TODO
+
+
+ TODO
+
+
+ TODO
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/observer.tsx b/src/app/observer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3ff49f5f7b04e0973d2408039a125225d91a6efa
--- /dev/null
+++ b/src/app/observer.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState, useTransition } from "react"
+import { useInterval } from "usehooks-ts"
+import Webcam from "react-webcam"
+import AutoSizer from "react-virtualized-auto-sizer"
+
+import { see } from "./engine/see"
+import { Progress } from "./interface/progress"
+
+export default function Observer({
+ onObserve,
+}: {
+ onObserve: (observation: string, image: string) => void
+}) {
+ const [_isPending, startTransition] = useTransition()
+ const [img, setImg] = useState
+
+
+
+
+
+
+
+
+
+ {lastImage ?
+
+
+
+ 
+
: null}
+
+
+ {lastRawObservation}
+
+
+
+
+
+
+ {action}
+
+
+
+
+
+ π ΏοΈ Informations: This demo uses IDEFICS, and is provided for demonstration and research purposes.
+βοΈ Limitations: This demo is provided as-is, with no guarantee of factually correct results. In some cases, the model may return hallucinated or innapropriate responses.
+{children}
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes