+
+
+
+
+
+
+
+
+ The Entire AI Development Process Automated in One Tool
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ + {step.title} +
++ {step.description} +
+
+ {steps.map((_, idx) => (
+
+
+
+ );
+}
+
+export function CompactLayerCard({ block }: { block: LayerBlock }) {
+ return
+ {block.label}
+
+
+
+
+
+ );
+}
+
+export function MiniMergeIndicator() {
+ return (
+
+
+
+ );
+}
+
+export function MiniForkIndicator() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export function LinearArchFlow({ layers }: { layers: LayerBlock[] }) {
+ return (
+
+
+
+
+
+
+
+
+ {layers.map((block, idx) => (
+
+
+ ))}
+
+ );
+}
+
+export function SequentialFlow({ layers }: { layers: LayerBlock[] }) {
+ return (
+ <>
+ {layers.map((block, idx) => (
+
+
+ );
+}
+
+export function MainPathFlow({ segments }: { segments: MainPathSegment[] }) {
+ return (
+
+
+
+
+
+
+ {isIdentitySkip ? (
+
+
+ identity
+
+
+ ) : (
+ <>
+
+
+
+
+ )}
+
+ {segments.map((segment, segIdx) => (
+
+ {segIdx > 0 &&
+ ))}
+
+ );
+}
diff --git a/src/components/ArchitectureSection/ArchModelSelector.tsx b/src/components/ArchitectureSection/ArchModelSelector.tsx
new file mode 100644
index 00000000..38027701
--- /dev/null
+++ b/src/components/ArchitectureSection/ArchModelSelector.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useRef, useState } from "react";
+import Translate from "@docusaurus/Translate";
+import { archModels } from "./data";
+
+export function ArchModelSelector({ models, activeModel, onSelect }: {
+ models: typeof archModels;
+ activeModel: number;
+ onSelect: (i: number) => void;
+}) {
+ const containerRef = useRef
+ (null);
+ const [contentHeight, setContentHeight] = useState(0);
+ const zoomIn = () => setScale(s => Math.min(+(s + 0.1).toFixed(1), 2));
+ const zoomOut = () => setScale(s => Math.max(+(s - 0.1).toFixed(1), 0.3));
+
+ useEffect(() => {
+ const el = contentRef.current;
+ if (!el) return;
+ const ro = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ setContentHeight(entry.contentRect.height);
+ }
+ });
+ ro.observe(el);
+ return () => ro.disconnect();
+ }, []);
+
+ return (
+ (null);
+ const [contentHeight, setContentHeight] = useState(0);
+ const zoomIn = () => setScale(s => Math.min(+(s + 0.1).toFixed(1), 2));
+ const zoomOut = () => setScale(s => Math.max(+(s - 0.1).toFixed(1), 0.3));
+
+ useEffect(() => {
+ const el = contentRef.current;
+ if (!el) return;
+ const ro = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ setContentHeight(entry.contentRect.height);
+ }
+ });
+ ro.observe(el);
+ return () => ro.disconnect();
+ }, []);
+
+ useEffect(() => {
+ const handleEsc = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+ const scrollY = window.scrollY;
+ document.addEventListener("keydown", handleEsc);
+ document.body.style.position = "fixed";
+ document.body.style.top = `-${scrollY}px`;
+ document.body.style.left = "0";
+ document.body.style.right = "0";
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.removeEventListener("keydown", handleEsc);
+ document.body.style.position = "";
+ document.body.style.top = "";
+ document.body.style.left = "";
+ document.body.style.right = "";
+ document.body.style.overflow = "";
+ window.scrollTo(0, scrollY);
+ };
+ }, [onClose]);
+
+ return createPortal(
+ (0);
+ const [modalOpen, setModalOpen] = useState(false);
+
+ const models = archModels;
+
+ const currentModel = models[activeModel];
+
+ const viewerContent = (
+
+ setModalOpen(false)}>
+ {viewerContent}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/ArchitectureSection/types.ts b/src/components/ArchitectureSection/types.ts
new file mode 100644
index 00000000..b325c893
--- /dev/null
+++ b/src/components/ArchitectureSection/types.ts
@@ -0,0 +1,16 @@
+export interface LayerBlock {
+ label: string;
+ trainable?: boolean;
+}
+
+export interface ResidualBlock {
+ mainBranch: LayerBlock[];
+ skipBranch: LayerBlock[];
+ merge: LayerBlock;
+}
+
+export type MainPathSegment = LayerBlock[] | ResidualBlock;
+
+export function isResidualBlock(segment: MainPathSegment): segment is ResidualBlock {
+ return !Array.isArray(segment) && 'mainBranch' in segment;
+}
diff --git a/src/components/BenefitsSection/index.tsx b/src/components/BenefitsSection/index.tsx
new file mode 100644
index 00000000..4f5e623a
--- /dev/null
+++ b/src/components/BenefitsSection/index.tsx
@@ -0,0 +1,231 @@
+import React, { useState } from "react";
+import Translate from "@docusaurus/Translate";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+export default function BenefitsSection() {
+ const [activeIndex, setActiveIndex] = useState(null);
+
+ const benefits = [
+ {
+ title: "Use Smaller Datasets",
+ titleId: "oneai.benefits.smaller.title",
+ description: "With ONE AI, you are rewarded for having a smaller dataset. This results in a leaner and faster AI model. Smaller datasets prevent memorization and help the AI focus on the actual application. Even with as few as 20 images, ONE AI can often create highly effective models and significantly reduce development time.",
+ descriptionId: "oneai.benefits.smaller.description"
+ },
+ {
+ title: "Do Less Manual Labeling",
+ titleId: "oneai.benefits.labeling.title",
+ description: "Because ONE AI achieves great results with smaller datasets, expanding your dataset becomes much faster. The first model can automatically label new data, while ONE AI adapts the model to the growing dataset. This saves a lot of manual work.",
+ descriptionId: "oneai.benefits.labeling.description"
+ },
+ {
+ title: "No Model Selection or Parameter Tuning",
+ titleId: "oneai.benefits.tuning.title",
+ description: "ONE AI automatically builds the best possible model for your specific use case. You do not need to search for the right foundation model, test endless parameters, or manually fine-tune your AI. ONE AI takes care of everything.",
+ descriptionId: "oneai.benefits.tuning.description"
+ },
+ {
+ title: "Create AI with Multiple Input Images",
+ titleId: "oneai.benefits.multiple.title",
+ description: "Many applications benefit from comparing multiple images or using reference images to improve accuracy. With ONE AI, you can easily provide multiple input images, and the system automatically adjusts the AI architecture to make use of this context.",
+ descriptionId: "oneai.benefits.multiple.description"
+ },
+ {
+ title: "Deploy AI on Any Hardware or Platform",
+ titleId: "oneai.benefits.export.title",
+ description: "The ONE AI Capture Tool can be used directly as a ready-to-use interface on any operating system. You can also export your AI as a platform-independent model, C++ project, executable, or HDL code for FPGAs. This saves a lot of integration time.",
+ descriptionId: "oneai.benefits.export.description"
+ },
+ {
+ title: "Get AI for Your Performance Needs",
+ titleId: "oneai.benefits.performance.title",
+ description: "ONE AI automatically considers your target hardware when creating models. It ensures that your desired frame rate and resource usage are always met. You do not need to waste time on trial and error since ONE AI optimizes performance for you.",
+ descriptionId: "oneai.benefits.performance.description"
+ },
+ {
+ title: "No Coding Required",
+ titleId: "oneai.benefits.coding.title",
+ description: "All AI creation features are fully integrated into ONE AI, so no programming is required. You simply provide your application knowledge, and ONE AI handles the complex parts. In the end, you get fully working software and AI models ready to use or integrate.",
+ descriptionId: "oneai.benefits.coding.description"
+ },
+ {
+ title: "Get Better Results in Less Time",
+ titleId: "oneai.benefits.results.title",
+ description: "In most cases, AI models predicted by ONE AI in just 0.7 seconds are more reliable and accurate than manually developed ones. Traditional AI development rarely makes sense anymore, especially since ONE AI can handle very specific requirements that used to require manual engineering.",
+ descriptionId: "oneai.benefits.results.description"
+ }
+ ];
+
+ const toggleAccordion = (index: number) => {
+ setActiveIndex(activeIndex === index ? null : index);
+ };
+
+ const hotspots = [
+ [
+ { x: 35, y: 30, targetIndex: 1 },
+ { x: 6, y: 33, targetIndex: 2 },
+ { x: 90, y: 8, targetIndex: 3 },
+ { x: 9, y: 13, targetIndex: 4 },
+ { x: 11, y: 28, targetIndex: 5 },
+ { x: 6, y: 23, targetIndex: 6 },
+ ],
+ [
+ { x: 64, y: 27, targetIndex: 1 },
+ { x: 6, y: 33, targetIndex: 2 },
+ { x: 9, y: 13, targetIndex: 4 },
+ { x: 11, y: 28, targetIndex: 5 },
+ { x: 6, y: 23, targetIndex: 6 },
+ { x: 87, y: 19, targetIndex: 0 },
+ { x: 90, y: 8, targetIndex: 3 },
+ ],
+ [
+ { x: 6, y: 8, targetIndex: 0 },
+ { x: 70, y: 50, targetIndex: 2 },
+ { x: 55, y: 21, targetIndex: 7 },
+ { x: 11, y: 13, targetIndex: 4 },
+ { x: 11, y: 28, targetIndex: 5 },
+ { x: 6, y: 23, targetIndex: 6 },
+ ],
+ [
+ { x: 90, y: 8, targetIndex: 0 },
+ { x: 35, y: 30, targetIndex: 1 },
+ { x: 6, y: 33, targetIndex: 2 },
+ { x: 9, y: 13, targetIndex: 4 },
+ { x: 11, y: 28, targetIndex: 5 },
+ { x: 6, y: 23, targetIndex: 6 },
+ ],
+ [
+ { x: 6, y: 8, targetIndex: 0 },
+ { x: 4, y: 33, targetIndex: 2 },
+ { x: 84, y: 16, targetIndex: 4 },
+ { x: 8, y: 28, targetIndex: 5 },
+ { x: 4, y: 23, targetIndex: 6 },
+ ],
+ [
+ { x: 6, y: 8, targetIndex: 0 },
+ { x: 6, y: 33, targetIndex: 2 },
+ { x: 9, y: 13, targetIndex: 4 },
+ { x: 25, y: 55, targetIndex: 5 },
+ { x: 6, y: 23, targetIndex: 6 },
+ ],
+ [
+ { x: 6, y: 8, targetIndex: 0 },
+ { x: 6, y: 33, targetIndex: 2 },
+ { x: 9, y: 13, targetIndex: 4 },
+ { x: 11, y: 28, targetIndex: 5 },
+ { x: 30, y: 25, targetIndex: 6 },
+ ],
+ [
+ { x: 49, y: 21, targetIndex: 2 },
+ { x: 9, y: 13, targetIndex: 4 },
+ { x: 11, y: 28, targetIndex: 5 },
+ { x: 6, y: 23, targetIndex: 6 },
+ ]
+ ];
+
+ return (
+
+
+ );
+}
diff --git a/src/components/ChatHero/SignUpModal.tsx b/src/components/ChatHero/SignUpModal.tsx
new file mode 100644
index 00000000..e85e33d3
--- /dev/null
+++ b/src/components/ChatHero/SignUpModal.tsx
@@ -0,0 +1,116 @@
+import React, { useEffect } from "react";
+import Translate from "@docusaurus/Translate";
+import { useColorMode } from "@docusaurus/theme-common";
+
+export type ModalTrigger = "attach" | "send";
+
+interface SignUpModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ trigger: ModalTrigger;
+}
+
+export default function SignUpModal({ isOpen, onClose, trigger }: SignUpModalProps) {
+ const { colorMode } = useColorMode();
+ const isDarkMode = colorMode === "dark";
+
+ useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "";
+ }
+ return () => {
+ document.body.style.overflow = "";
+ };
+ }, [isOpen]);
+
+ useEffect(() => {
+ const handleEsc = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ onClose();
+ }
+ };
+ if (isOpen) {
+ window.addEventListener("keydown", handleEsc);
+ }
+ return () => window.removeEventListener("keydown", handleEsc);
+ }, [isOpen, onClose]);
+
+ if (!isOpen) return null;
+
+ return (
+ ("send");
+ const [prompt, setPrompt] = useState("");
+
+ useEffect(() => {
+ setPrompt(getStoredPrompt());
+ }, []);
+
+ const handlePromptChange = (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ setPrompt(value);
+ savePrompt(value);
+ };
+
+ const handleAttachClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ setModalTrigger("attach");
+ setIsModalOpen(true);
+ };
+
+ const handleSendClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ setModalTrigger("send");
+ setIsModalOpen(true);
+ };
+
+ const scrollToSection = (id: string) => {
+ const element = document.getElementById(id);
+ if (element) {
+ const navbarHeight = 60;
+ const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+ window.scrollTo({
+ top: elementPosition - navbarHeight,
+ behavior: "smooth",
+ });
+ }
+ };
+
+ return (
+
+ setIsModalOpen(false)}
+ trigger={modalTrigger}
+ />
+
+
+
+ );
+}
diff --git a/src/components/ComparisonDemo/index.tsx b/src/components/ComparisonDemo/index.tsx
new file mode 100644
index 00000000..a1fc6a36
--- /dev/null
+++ b/src/components/ComparisonDemo/index.tsx
@@ -0,0 +1,433 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import Translate from "@docusaurus/Translate";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { FaTableTennis } from "react-icons/fa";
+import { FaMicrochip } from "react-icons/fa6";
+import { GiDeliveryDrone } from "react-icons/gi";
+import type { IconType } from "react-icons";
+
+interface Stat {
+ value: string;
+ label: string;
+}
+
+interface Example {
+ id: string;
+ label: string;
+ icon: IconType;
+ subtitle: string;
+ oneAiVideo: string;
+ competitorVideo: string;
+ competitorName: string;
+ oneAiStats: Stat[];
+ competitorStats: Stat[];
+ footnote: string;
+}
+
+const EXAMPLES: Example[] = [
+ {
+ id: "tennis",
+ label: "Tennis",
+ icon: FaTableTennis,
+ subtitle: "Moving Objects · Small Objects · Big Image Size",
+ oneAiVideo: "/img/demos/tennis_demo.webm",
+ competitorVideo: "/img/demos/tennis_demo.webm",
+ competitorName: "YOLO26n",
+ oneAiStats: [
+ { value: "456", label: "Detections" },
+ { value: "24", label: "FPS*" },
+ { value: "0.04 M", label: "Parameters" },
+ ],
+ competitorStats: [
+ { value: "379", label: "Detections" },
+ { value: "2", label: "FPS*" },
+ { value: "2.4 M", label: "Parameters" },
+ ],
+ footnote: "*One Core of Intel Ultra 7 CPU",
+ },
+ {
+ id: "chip",
+ label: "Chip",
+ icon: FaMicrochip,
+ subtitle: "Defect Detection · High Precision · Small Details",
+ oneAiVideo: "/img/demos/chip.webm",
+ competitorVideo: "/img/demos/chip.webm",
+ competitorName: "YOLOv8n",
+ oneAiStats: [
+ { value: "98.4", label: "F1 Score" },
+ { value: "45", label: "FPS*" },
+ { value: "0.02 M", label: "Parameters" },
+ ],
+ competitorStats: [
+ { value: "91.2", label: "F1 Score" },
+ { value: "12", label: "FPS*" },
+ { value: "3.2 M", label: "Parameters" },
+ ],
+ footnote: "*One Core of Intel Ultra 7 CPU",
+ },
+ {
+ id: "drone",
+ label: "Drone",
+ icon: GiDeliveryDrone,
+ subtitle: "Aerial View · Object Tracking · Real-Time",
+ oneAiVideo: "/img/demos/drone.webm",
+ competitorVideo: "/img/demos/drone.webm",
+ competitorName: "YOLOv8n",
+ oneAiStats: [
+ { value: "312", label: "Detections" },
+ { value: "30", label: "FPS*" },
+ { value: "0.03 M", label: "Parameters" },
+ ],
+ competitorStats: [
+ { value: "245", label: "Detections" },
+ { value: "8", label: "FPS*" },
+ { value: "3.2 M", label: "Parameters" },
+ ],
+ footnote: "*One Core of Intel Ultra 7 CPU",
+ },
+];
+
+type SlidePhase = "idle" | "ready" | "sliding";
+
+function ExampleSelector({
+ activeIndex,
+ onSelect,
+ horizontal = false,
+}: {
+ activeIndex: number;
+ onSelect: (index: number) => void;
+ horizontal?: boolean;
+}) {
+ const containerRef = useRef(null);
+ const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+ const [indicator, setIndicator] = useState({ top: 0, left: 0, width: 0, height: 0 });
+
+ useEffect(() => {
+ const btn = buttonRefs.current[activeIndex];
+ const container = containerRef.current;
+ if (btn && container) {
+ const containerRect = container.getBoundingClientRect();
+ const btnRect = btn.getBoundingClientRect();
+ setIndicator({
+ top: btnRect.top - containerRect.top,
+ left: btnRect.left - containerRect.left,
+ width: btnRect.width,
+ height: btnRect.height,
+ });
+ }
+ }, [activeIndex]);
+
+ return (
+
0 ? 1 : 0,
+ backgroundColor: "color-mix(in srgb, var(--ifm-color-primary) 12%, transparent)",
+ borderColor: "color-mix(in srgb, var(--ifm-color-primary) 35%, transparent)",
+ }}
+ />
+
+ {models.map((m, index) => {
+ const isActive = index === activeModel;
+ const Icon = m.icon;
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/ArchitectureSection/ArchitectureViewer.tsx b/src/components/ArchitectureSection/ArchitectureViewer.tsx
new file mode 100644
index 00000000..a02e6d18
--- /dev/null
+++ b/src/components/ArchitectureSection/ArchitectureViewer.tsx
@@ -0,0 +1,144 @@
+import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+function ArchViewerControls({ scale, zoomIn, zoomOut, onExpand }: { scale: number; zoomIn: () => void; zoomOut: () => void; onExpand: () => void }) {
+ return (
+
+
+
+
+
+ );
+}
+
+export function ArchitectureViewer({ children, onExpand }: { children: React.ReactNode; onExpand: () => void }) {
+ const [scale, setScale] = useState(0.75);
+ const contentRef = useRef
+
+ );
+}
+
+export function ArchitectureModal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
+ const [scale, setScale] = useState(0.75);
+ const contentRef = useRef
+
+
+
+
+ {children}
+
+
+
+
,
+ document.body
+ );
+}
diff --git a/src/components/ArchitectureSection/data.ts b/src/components/ArchitectureSection/data.ts
new file mode 100644
index 00000000..3d2ac5ac
--- /dev/null
+++ b/src/components/ArchitectureSection/data.ts
@@ -0,0 +1,89 @@
+import { TbGridPattern, TbArrowsSplit } from "react-icons/tb";
+import type { LayerBlock, MainPathSegment } from "./types";
+
+export const linearArch: LayerBlock[] = [
+ { label: "Input" },
+ { label: "Quantization" },
+ { label: "Convolution", trainable: true },
+ { label: "Max Pooling" },
+ { label: "Convolution", trainable: true },
+ { label: "Max Pooling" },
+ { label: "Convolution", trainable: true },
+ { label: "Max Pooling" },
+ { label: "Flatten" },
+ { label: "Dense", trainable: true },
+];
+
+export const multiInputShared: LayerBlock = {
+ label: "Input",
+};
+
+export const multiInputMainSegments: MainPathSegment[] = [
+ [
+ { label: "Reshape" },
+ { label: "Convolution", trainable: true },
+ { label: "Batch Norm", trainable: true },
+ { label: "ReLU" },
+ { label: "Max Pooling" },
+ ],
+ {
+ mainBranch: [
+ { label: "Convolution", trainable: true },
+ { label: "Batch Norm", trainable: true },
+ { label: "ReLU" },
+ { label: "Convolution", trainable: true },
+ { label: "Batch Norm", trainable: true },
+ ],
+ skipBranch: [
+ { label: "Convolution", trainable: true },
+ ],
+ merge: { label: "Add" },
+ },
+ [
+ { label: "ReLU" },
+ ],
+ {
+ mainBranch: [
+ { label: "Convolution", trainable: true },
+ { label: "Batch Norm", trainable: true },
+ { label: "ReLU" },
+ { label: "Convolution", trainable: true },
+ { label: "Batch Norm", trainable: true },
+ ],
+ skipBranch: [],
+ merge: { label: "Add" },
+ },
+ [
+ { label: "ReLU" },
+ ],
+];
+
+export const multiInputBranch: LayerBlock[] = [
+ { label: "Split" },
+ { label: "Squeeze" },
+ { label: "Squeeze" },
+ { label: "Subtract" },
+ { label: "Avg Pooling" },
+ { label: "Convolution", trainable: true },
+ { label: "Batch Norm", trainable: true },
+ { label: "ReLU" },
+ { label: "Convolution", trainable: true },
+ { label: "Batch Norm", trainable: true },
+ { label: "ReLU" },
+ { label: "Avg Pooling" },
+];
+
+export const multiInputMerged: LayerBlock[] = [
+ { label: "Concatenate" },
+ { label: "Convolution", trainable: true },
+ { label: "Convolution", trainable: true },
+ { label: "Batch Norm", trainable: true },
+ { label: "ReLU" },
+ { label: "Convolution", trainable: true },
+ { label: "Reshape" },
+];
+
+export const archModels = [
+ { label: "Image Classification", labelId: "oneai.architecture.linear.label", image: "/img/ai/one_ai_plugin/benefits/3.webp", icon: TbGridPattern },
+ { label: "Multi-Input", labelId: "oneai.architecture.multi.label", image: "/img/ai/one_ai_plugin/benefits/4.webp", icon: TbArrowsSplit },
+];
diff --git a/src/components/ArchitectureSection/index.tsx b/src/components/ArchitectureSection/index.tsx
new file mode 100644
index 00000000..439f11a9
--- /dev/null
+++ b/src/components/ArchitectureSection/index.tsx
@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import Translate from "@docusaurus/Translate";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import HeroBackground from "../HeroBackground";
+import { LayerCard, ArrowDown, LinearArchFlow, MainPathFlow } from "./ArchFlowComponents";
+import { ArchitectureViewer, ArchitectureModal } from "./ArchitectureViewer";
+import { ArchModelSelector } from "./ArchModelSelector";
+import {
+ archModels,
+ linearArch,
+ multiInputShared,
+ multiInputMainSegments,
+ multiInputBranch,
+ multiInputMerged,
+} from "./data";
+
+export default function ArchitectureSection() {
+ const [activeModel, setActiveModel] = useState e.stopPropagation()}
+ >
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+ {activeModel === 0 ? (
+
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Main Path
+
+
+ In-Connect Branch
+ {multiInputBranch.map((block, idx) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ {multiInputMerged.map((block, idx) => (
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {modalOpen && (
+
+
+
+
+
+
+
+ })
+
+
+ setModalOpen(true)}>
+ {viewerContent}
+
+
+
+
+
+
+
+
+
+ {benefits.map((benefit, index) => {
+ const isOpen = activeIndex === index;
+ return (
+
+
+ toggleAccordion(index)}
+ className={`px-3 cursor-pointer transition-all duration-300 ease-in-out ${
+ isOpen
+ ? 'bg-[var(--ifm-color-primary)]'
+ : 'bg-white/50 hover:bg-white dark:bg-[#2a2a2a] dark:hover:bg-[#333]'
+ }`}
+ >
+
+ );
+ })}
+
+
+
+ {benefit.title}
+
+
+
+
+
+
+
+
+
+
+
+ 
{
+ e.currentTarget.src = '/img/ai/Capture.png';
+ }}
+ />
+
+ {hotspots[activeIndex !== null ? activeIndex : 0]?.map((hotspot, idx) => (
+
+ {
+ e.currentTarget.src = '/img/ai/Capture.png';
+ }}
+ />
+
+ {hotspots[activeIndex !== null ? activeIndex : 0]?.map((hotspot, idx) => (
+ toggleAccordion(hotspot.targetIndex)}
+ >
+
+ ))}
+
+
+
+
+
+
+ {benefits[hotspot.targetIndex].title}
+
+
+
+
+ );
+}
diff --git a/src/components/ChatHero/index.tsx b/src/components/ChatHero/index.tsx
new file mode 100644
index 00000000..45bbf155
--- /dev/null
+++ b/src/components/ChatHero/index.tsx
@@ -0,0 +1,263 @@
+import React, { useState, useEffect } from "react";
+import Translate from "@docusaurus/Translate";
+import { useColorMode } from "@docusaurus/theme-common";
+import SignUpModal, { ModalTrigger } from "./SignUpModal";
+import HeroBackground from "../HeroBackground";
+
+const STORAGE_KEY = "chathero_prompt";
+const STORAGE_EXPIRY_DAYS = 90;
+
+function getStoredPrompt(): string {
+ if (typeof window === "undefined") return "";
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (!stored) return "";
+ const { value, expiry } = JSON.parse(stored);
+ if (Date.now() > expiry) {
+ localStorage.removeItem(STORAGE_KEY);
+ return "";
+ }
+ return value || "";
+ } catch {
+ return "";
+ }
+}
+
+function savePrompt(value: string) {
+ if (typeof window === "undefined") return;
+ try {
+ const expiry = Date.now() + STORAGE_EXPIRY_DAYS * 24 * 60 * 60 * 1000;
+ localStorage.setItem(STORAGE_KEY, JSON.stringify({ value, expiry }));
+ } catch {}
+}
+
+export default function ChatHero() {
+ const { colorMode } = useColorMode();
+ const isDarkMode = colorMode === "dark";
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [modalTrigger, setModalTrigger] = useState e.stopPropagation()}
+ >
+
+
+
+
+ {trigger === "attach" ? (
+ <>
+
+
+
+
+
+
+
+ Sign in to upload files
+
+
+
+ Sign in to create your AI
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create your Custom AI
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Already an AI expert?
+
+
+ Explore our Tools for Professionals
+
+
+
+
+
+
+ );
+}
+
+function DesktopComparisonDemo() {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [prevIndex, setPrevIndex] = useState(null);
+ const [slidePhase, setSlidePhase] = useState("idle");
+ const [direction, setDirection] = useState<1 | -1>(1);
+ const wrapperRef = useRef(null);
+ const activeRef = useRef(activeIndex);
+ activeRef.current = activeIndex;
+ const slidingRef = useRef(false);
+
+ const switchTo = useCallback((next: number) => {
+ if (next === activeRef.current || slidingRef.current) return;
+ slidingRef.current = true;
+
+ const dir: 1 | -1 = next > activeRef.current ? 1 : -1;
+ setDirection(dir);
+ setPrevIndex(activeRef.current);
+ setActiveIndex(next);
+ setSlidePhase("ready");
+
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ setSlidePhase("sliding");
+ });
+ });
+
+ setTimeout(() => {
+ setSlidePhase("idle");
+ setPrevIndex(null);
+ slidingRef.current = false;
+ }, SLIDE_DURATION + 100);
+ }, []);
+
+ const handleSelect = useCallback((next: number) => {
+ switchTo(next);
+ const wrapper = wrapperRef.current;
+ if (!wrapper) return;
+ const scrollableHeight = wrapper.offsetHeight - window.innerHeight;
+ if (scrollableHeight <= 0) return;
+ const targetProgress = (next + 0.5) / EXAMPLES.length;
+ const targetScrollY = wrapper.offsetTop + targetProgress * scrollableHeight;
+ window.scrollTo({ top: targetScrollY, behavior: "instant" });
+ }, [switchTo]);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const wrapper = wrapperRef.current;
+ if (!wrapper) return;
+ const rect = wrapper.getBoundingClientRect();
+ const scrollableHeight = wrapper.offsetHeight - window.innerHeight;
+ if (scrollableHeight <= 0) return;
+
+ const progress = Math.max(0, Math.min(1, -rect.top / scrollableHeight));
+ const idx = Math.min(
+ EXAMPLES.length - 1,
+ Math.floor(progress * EXAMPLES.length)
+ );
+
+ if (idx !== activeRef.current) {
+ switchTo(idx);
+ }
+ };
+
+ window.addEventListener("scroll", handleScroll, { passive: true });
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, [switchTo]);
+
+ const prevExample = prevIndex !== null ? EXAMPLES[prevIndex] : null;
+ const activeExample = EXAMPLES[activeIndex];
+
+ const slideTransition = `transform ${SLIDE_DURATION}ms ${SLIDE_EASING}`;
+ const isDown = direction === 1;
+
+ return (
+ (null);
+
+ const useCases = [
+ {
+ title: "High Speed HDL",
+ titleId: "oneai.usecase.hdl.title",
+ subtitle: "ONE AI implements efficient AI on any FPGA with our open source AI to HDL libraries",
+ subtitleId: "oneai.usecase.hdl.subtitle",
+ backgroundImage: "/img/ai/one_ai_plugin/use_cases/chip/defect_1.png",
+ displayImage: isDarkMode ? "/img/ai/one_ai_plugin/use_cases/chip/integration.svg" : "/img/ai/one_ai_plugin/use_cases/chip/integration-light.svg",
+ description: "Next to the vendor tools for AI integration we offer a version for parallel AI integration on FPGAs that allows integration just like parallel image processing that doesn't need an additional processor and adds no overhead to the system. Together with our partner Altera we show how Altera's MAX® 10 with ONE AI and our HDL generator can now outperform Nvidia's Jetson Orin Nano with:",
+ descriptionId: "oneai.usecase.hdl.description",
+ metrics: [
+ { value: "72×", label: "Faster Detection", labelId: "homepage.metric.latency" },
+ { value: "24×", label: "Less Errors", labelId: "homepage.metric.errors" },
+ { value: "20×", label: "Lower Power", labelId: "homepage.metric.power" },
+ { value: "6×", label: "Lower Cost", labelId: "homepage.metric.cost" },
+ ],
+ whitepaper: "/docs/one-ai/documentation/integration/fpga-deployment",
+ linkText: "More Details",
+ linkTextId: "oneai.usecase.link"
+ },
+ {
+ title: "Prebuild UI",
+ titleId: "oneai.usecase.ui.title",
+ subtitle: "Integration on any system with operating system and graphical interface",
+ subtitleId: "oneai.usecase.ui.subtitle",
+ backgroundImage: "/img/ai/one_ai_plugin/use_cases/capture/preview.png",
+ displayImage: isDarkMode ? "/img/ai/one_ai_plugin/use_cases/capture/integration.svg" : "/img/ai/one_ai_plugin/use_cases/capture/integration-light.svg",
+ description: "Eliminate months of development time. Integrate AI with our pre-build UI that supports monitoring, remote control and continuous improvement. Already in production with leading production companies and ready for your quality control or automation task with:",
+ descriptionId: "oneai.usecase.ui.description",
+ metrics: [
+ { value: "1-Click", label: "Deployment", labelId: "oneai.metric.deployment" },
+ { value: "< 1 Day", label: "Development Time", labelId: "oneai.metric.devtime" },
+ ],
+ whitepaper: "/docs/one-ai/documentation/camera-tool",
+ linkText: "More Details",
+ linkTextId: "oneai.usecase.link"
+ },
+ {
+ title: "Direct Integration with SDK",
+ titleId: "oneai.usecase.sdk.title",
+ subtitle: "Deploy AI in Any Application",
+ subtitleId: "oneai.usecase.sdk.subtitle",
+ backgroundImage: "/img/ai/one_ai_plugin/demos/overlap-difference/image_000118_test.png",
+ displayImage: isDarkMode ? "/img/ai/one_ai_plugin/use_cases/pcb/integration.svg" : "/img/ai/one_ai_plugin/use_cases/pcb/integration-light.svg",
+ description: "ONE AI can create generic ONNX or Tensorflow Lite models that can be integrated directly with your application using our SDK. One example AI model,that you can integrate, detects small objects on complex backgrounds and outperformes YOLOv8 with:",
+ descriptionId: "oneai.usecase.sdk.description",
+ metrics: [
+ { value: "95.7", label: "F1 Score", labelId: "homepage.metric.f1score" },
+ { value: "8×", label: "Smaller Model", labelId: "homepage.metric.modelsize" },
+ { value: "10×", label: "Fewer Errors", labelId: "homepage.metric.fewererrors" },
+ ],
+ whitepaper: "/docs/one-ai/documentation/integration/deployment-overview",
+ linkText: "More Details",
+ linkTextId: "oneai.usecase.link"
+ },
+ {
+ title: "C++ Project or Executable",
+ titleId: "oneai.usecase.cpp.title",
+ subtitle: "Deploy AI with any CPU, TPU, GPU or MCU",
+ subtitleId: "oneai.usecase.cpp.subtitle",
+ backgroundImage: "/img/ai/one_ai_plugin/use_cases/pcb/pcb_1.png",
+ displayImage: isDarkMode ? "/img/ai/one_ai_plugin/use_cases/pcb/integration.svg" : "/img/ai/one_ai_plugin/use_cases/pcb/integration-light.svg",
+ description: "ONE AI can create Tensorflow Lite based C++ projects or precompiled executables with API that run efficient with any kind of processor or AI accelerator. One example is a PCB quality control where the AI by ONE AI beat not only standard image processing and universal AI models by speed and accuracy, but also the AI model from the scientists with:",
+ descriptionId: "oneai.usecase.cpp.description",
+ metrics: [
+ { value: "98.4", label: "F1 Score", labelId: "oneai.metric.f1score" },
+ { value: "750 %", label: "Speed Increase", labelId: "oneai.metric.speed" },
+ ],
+ whitepaper: "/docs/one-ai/documentation/export",
+ linkText: "More Details",
+ linkTextId: "oneai.usecase.link"
+ }
+ ];
+
+ const currentUseCase = useCases[activeUseCase];
+
+ const handlePrev = () => {
+ setActiveUseCase(activeUseCase - 1 < 0 ? useCases.length - 1 : activeUseCase - 1);
+ };
+
+ const handleNext = () => {
+ setActiveUseCase(activeUseCase + 1 >= useCases.length ? 0 : activeUseCase + 1);
+ };
+
+ const handleTouchStart = (e: React.TouchEvent) => {
+ touchStartX.current = e.touches[0].clientX;
+ };
+
+ const handleTouchEnd = (e: React.TouchEvent) => {
+ if (touchStartX.current === null) return;
+ const diff = touchStartX.current - e.changedTouches[0].clientX;
+ if (Math.abs(diff) > 50) {
+ if (diff > 0) handleNext();
+ else handlePrev();
+ }
+ touchStartX.current = null;
+ };
+
+ return (
+
+
0 ? 1 : 0,
+ backgroundColor: "color-mix(in srgb, var(--ifm-color-primary) 12%, transparent)",
+ borderColor: "color-mix(in srgb, var(--ifm-color-primary) 35%, transparent)",
+ }}
+ />
+
+ {EXAMPLES.map((ex, index) => {
+ const isActive = index === activeIndex;
+ const Icon = ex.icon;
+ return (
+
+ );
+ })}
+
+ );
+}
+
+const SLIDE_DURATION = 800;
+const SLIDE_EASING = "cubic-bezier(0.65, 0, 0.35, 1)";
+
+function ExampleContent({ example, compact = false }: { example: Example; compact?: boolean }) {
+ const oneAiVideoUrl = useBaseUrl(example.oneAiVideo);
+ const competitorVideoUrl = useBaseUrl(example.competitorVideo);
+
+ if (compact) {
+ return (
+
+
+ );
+ }
+
+ return (
+ + {example.subtitle} +
+ +
+
+
+ ONE AI
+
+
+
+
+ {example.oneAiStats.map((stat) => (
+
+
+ {stat.value}
+ {stat.label}
+
+ ))}
+
+
+
+ {example.competitorName}
+
+
+
+
+ {example.competitorStats.map((stat) => (
+
+
+ {stat.value}
+ {stat.label}
+
+ ))}
+ {example.footnote}
+
+
+ );
+}
+
+function MobileComparisonDemo() {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const example = EXAMPLES[activeIndex];
+
+ return (
+ + {example.subtitle} +
+ +
+
+
+
+
+
+
+
+ ONE AI
+Optimized CNN Architecture
+
+ {example.oneAiStats.map((stat) => (
+
+
+ {stat.value}
+ {stat.label}
+
+ ))}
+
+
+
+
+
+
+
+
+ {example.competitorName}
+
+ {example.competitorStats.map((stat) => (
+
+
+ {stat.value}
+ {stat.label}
+
+ ))}
+ {example.footnote}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default function ComparisonDemo() {
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const check = () => setIsMobile(window.innerWidth < 1024);
+ check();
+ window.addEventListener("resize", check);
+ return () => window.removeEventListener("resize", check);
+ }, []);
+
+ return isMobile ?
+
+
+
+
+
+
+
+
+
+
+ {prevExample && (
+
+ {isDown ? (
+ <>
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/HeroBackground/index.tsx b/src/components/HeroBackground/index.tsx
index a4a40bd5..2f549311 100644
--- a/src/components/HeroBackground/index.tsx
+++ b/src/components/HeroBackground/index.tsx
@@ -3,6 +3,7 @@ import { useColorMode } from "@docusaurus/theme-common";
interface HeroBackgroundProps {
children: React.ReactNode;
+ id?: string;
className?: string;
style?: React.CSSProperties;
enableParallax?: boolean;
@@ -10,6 +11,7 @@ interface HeroBackgroundProps {
export default function HeroBackground({
children,
+ id,
className = "",
style = {},
enableParallax = true,
@@ -38,6 +40,7 @@ export default function HeroBackground({
return (
-
+
+
+
+
+
+ );
+}
diff --git a/src/components/GetStarted/index.tsx b/src/components/GetStarted/index.tsx
new file mode 100644
index 00000000..4955968a
--- /dev/null
+++ b/src/components/GetStarted/index.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import Translate from "@docusaurus/Translate";
+import HeroBackground from "@site/src/components/HeroBackground";
+
+export default function GetStarted() {
+ return (
+
+
+ Deployed with ONE Click
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {currentUseCase.title}
+
+
+
+
+ {currentUseCase.subtitle}
+
+
+
+
+ {currentUseCase.metrics.map((metric, metricIdx) => (
+
+
+
+
+
+ {metric.value}
+
+
+
+ {metric.label}
+
+
+
+ ))}
+
+
+
+
+ {useCases.map((_, index) => (
+
+ setActiveUseCase(index)}
+ className={`w-2 h-2 rounded-full cursor-pointer transition-all duration-300 ${
+ index === activeUseCase ? "bg-[var(--ifm-color-primary)]" : "bg-gray-400 dark:bg-white/40 hover:bg-gray-500 dark:hover:bg-white/60"
+ }`}
+ />
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ Get Started in 3 Simple Steps:
+
+
+
+
+
+
+
+
+
+ 3.{" "}
+
+ Build your first AI models for free.
+
+
+
+
+ Quick Start Guide
+
+
+
+
+
+
+
+ (null);
const connectionPairsRef = useRef>([]);
@@ -108,7 +126,10 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
useEffect(() => {
if (isCollapsingToCore) {
+ setOrangeNodesAdded(false);
+ setPurpleNodesAdded(false);
setRedNodesAdded(false);
+ hasTriggeredTrainingComplete.current = false;
}
}, [isCollapsingToCore]);
@@ -139,8 +160,23 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
const performanceTierRef = useRef(performanceTier);
performanceTierRef.current = performanceTier;
+ const nodeCountsRef = useRef(nodeCounts);
+ nodeCountsRef.current = nodeCounts;
+
+ const skipTrainingCleanupRef = useRef(skipTrainingCleanup);
+ skipTrainingCleanupRef.current = skipTrainingCleanup;
+
+ const enableRotationRef = useRef(enableRotation);
+ enableRotationRef.current = enableRotation;
+
+ const animationDurationRef = useRef(animationDuration);
+ animationDurationRef.current = animationDuration;
+
+ const prevNodeCountRef = useRef(nodeCounts.base);
+
useEffect(() => {
- if (blueprintRef.current.length > 0) return;
+ if (blueprintRef.current.length > 0 && nodeCounts.base === prevNodeCountRef.current) return;
+ prevNodeCountRef.current = nodeCounts.base;
const generated: NeuralNode[] = [];
nodeIdCounterRef.current = 0;
@@ -158,10 +194,10 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
scale: 0,
});
- const totalNodes = NODE_COUNTS[performanceTier].base;
+ const totalNodes = nodeCounts.base;
const radius = 3.5;
const goldenRatio = (1 + Math.sqrt(5)) / 2;
-
+
for (let i = 0; i < totalNodes; i++) {
const theta = 2 * Math.PI * i / goldenRatio;
const phi = Math.acos(1 - 2 * (i + 0.5) / totalNodes);
@@ -186,7 +222,7 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
blueprintRef.current = generated;
nodesRef.current = [];
- }, []);
+ }, [nodeCounts.base]);
const connectNodeToExisting = (newNode: NeuralNode, existingNodes: NeuralNode[], pushToPairs = true) => {
if (existingNodes.length === 0) return [];
@@ -278,20 +314,22 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
isRebuildingBaseRef.current = true;
rebuildBaseStartTimeRef.current = performance.now();
hasTriggeredRebuildComplete.current = false;
- rebuildBuiltCountRef.current = 0;
+ rebuildBuiltCountRef.current = 1;
- const currentNodes = nodesRef.current;
- for (let i = 0; i < currentNodes.length; i++) {
- currentNodes[i].scale = i === 0 ? 1 : 0;
- }
+ // Clear all connections and pairs — animation will rebuild from scratch
+ connectionPairsRef.current = [];
+ connectionIdCounterRef.current = 0;
+ animationOffsetsRef.current.clear();
- const baseNodes: NeuralNode[] = [];
for (let i = 0; i < blueprintRef.current.length; i++) {
- if (blueprintRef.current[i].color === '#00FFD1') {
- baseNodes.push(blueprintRef.current[i]);
- }
+ blueprintRef.current[i].connections = [];
+ blueprintRef.current[i].scale = 0;
}
- nodesRef.current = baseNodes;
+
+ // Start with only the core node
+ const core = blueprintRef.current[0];
+ core.scale = 1;
+ nodesRef.current = [core];
} else if (!isRebuildingBase) {
isRebuildingBaseRef.current = false;
@@ -366,7 +404,8 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
const delta = Math.min(state.clock.getDelta(), 0.1);
if (groupRef.current) {
- if (performanceTierRef.current !== 'low') {
+ const shouldRotate = enableRotationRef.current ?? (performanceTierRef.current !== 'low');
+ if (shouldRotate) {
groupRef.current.rotation.y = time * 0.18;
}
let targetY = isExpanded ? 0.8 : 0;
@@ -443,11 +482,11 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
}
if (isBuildingBaseRef.current) {
- const duration = TOTAL_ANIMATION_DURATION;
+ const duration = animationDurationRef.current;
const elapsed = performance.now() - buildBaseStartTimeRef.current;
const progress = Math.min(elapsed / duration, 1);
- const tierNodeCount = NODE_COUNTS[performanceTierRef.current].base + 1;
+ const tierNodeCount = nodeCountsRef.current.base + 1;
const totalBlueprint = Math.min(tierNodeCount, blueprintRef.current.length);
const targetCount = Math.max(1, Math.ceil(progress * totalBlueprint));
@@ -493,8 +532,9 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
}
if (trainingNodes.length > 0) {
- const DURATION = 800;
- const STAGGER = Math.floor((TOTAL_ANIMATION_DURATION - DURATION) / trainingNodes.length);
+ const dur = animationDurationRef.current;
+ const DURATION = Math.min(800, Math.round(dur * 0.21));
+ const STAGGER = Math.floor((dur - DURATION) / trainingNodes.length);
const totalAnimationTime = (trainingNodes.length * STAGGER) + DURATION;
let scaleChanged = false;
@@ -519,7 +559,7 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
}
if (isCollapsingToCoreRef.current) {
- const duration = TOTAL_ANIMATION_DURATION;
+ const duration = animationDurationRef.current;
const elapsed = performance.now() - collapseStartTimeRef.current;
const allNodes = nodesRef.current;
@@ -529,7 +569,7 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
}
nonCoreNodes.sort((a, b) => b.distance - a.distance);
- const FADE_DURATION = 250;
+ const FADE_DURATION = Math.min(250, Math.round(duration * 0.07));
const CORE_FADE_DURATION_INNER = 200;
const STAGGER = nonCoreNodes.length > 0
? Math.floor((duration - FADE_DURATION - CORE_FADE_DURATION_INNER) / nonCoreNodes.length)
@@ -576,11 +616,11 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
}
if (isRebuildingBaseRef.current) {
- const duration = TOTAL_ANIMATION_DURATION;
+ const duration = animationDurationRef.current;
const elapsed = performance.now() - rebuildBaseStartTimeRef.current;
const progress = Math.min(elapsed / duration, 1);
- const tierNodeCount = NODE_COUNTS[performanceTierRef.current].base + 1;
+ const tierNodeCount = nodeCountsRef.current.base + 1;
const totalBlueprint = Math.min(tierNodeCount, blueprintRef.current.length);
const targetCount = Math.max(1, Math.ceil(progress * totalBlueprint));
@@ -632,8 +672,9 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
setOrangeNodesAdded(true);
isTrainingRef.current = true;
trainingStartTimeRef.current = performance.now();
+ hasTriggeredTrainingComplete.current = false;
- const totalNew = NODE_COUNTS[performanceTier].training;
+ const totalNew = nodeCounts.training;
const radius = 4.5;
for (let i = 0; i < totalNew; i++) {
@@ -674,6 +715,7 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
trainingColorRef.current = 'purple';
hasTriggeredTrainingComplete.current = false;
+ if (!skipTrainingCleanupRef.current) {
const baseNodeIds = new Set();
let writeIdx = 0;
for (let i = 0; i < nodesRef.current.length; i++) {
@@ -721,8 +763,9 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
}
node.connections.length = connWriteIdx;
}
+ }
- const totalNew = NODE_COUNTS[performanceTier].training;
+ const totalNew = nodeCounts.training;
const radius = 4.5;
for (let i = 0; i < totalNew; i++) {
@@ -762,6 +805,7 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
trainingColorRef.current = 'red';
hasTriggeredTrainingComplete.current = false;
+ if (!skipTrainingCleanupRef.current) {
const baseNodeIds = new Set();
let writeIdx = 0;
for (let i = 0; i < nodesRef.current.length; i++) {
@@ -809,8 +853,9 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
}
node.connections.length = connWriteIdx;
}
+ }
- const totalNew = NODE_COUNTS[performanceTier].training;
+ const totalNew = nodeCounts.training;
const radius = 4.5;
for (let i = 0; i < totalNew; i++) {
diff --git a/src/components/HomeHero/SoftwareWindow/ChatInterface.tsx b/src/components/HomeHero/SoftwareWindow/ChatInterface.tsx
new file mode 100644
index 00000000..d4afc820
--- /dev/null
+++ b/src/components/HomeHero/SoftwareWindow/ChatInterface.tsx
@@ -0,0 +1,563 @@
+import React, { useState, useEffect, useRef } from "react";
+import Translate, { translate } from "@docusaurus/Translate";
+
+interface ChatMessage {
+ id: number;
+ sender: "user" | "ai";
+ contentId: string;
+ defaultContent: string;
+ delay: number;
+ hasButton?: boolean;
+}
+
+const chatMessages: ChatMessage[] = [
+ {
+ id: 1,
+ sender: "user",
+ contentId: "homehero.chat.user1",
+ defaultContent: "Make Apple QC",
+ delay: 600,
+ },
+ {
+ id: 2,
+ sender: "ai",
+ contentId: "homehero.chat.ai1",
+ defaultContent: "Should I help with dataset or hardware for recording?",
+ delay: 2000,
+ },
+ {
+ id: 3,
+ sender: "user",
+ contentId: "homehero.chat.user2",
+ defaultContent: "I already have training data",
+ delay: 3500,
+ },
+ {
+ id: 4,
+ sender: "ai",
+ contentId: "homehero.chat.ai2",
+ defaultContent: "Here is your finished ONE AI project",
+ delay: 5200,
+ hasButton: true,
+ },
+];
+
+interface ChatHistoryItem {
+ id: string;
+ titleId: string;
+ defaultTitle: string;
+ isCurrent?: boolean;
+}
+
+const chatHistory: ChatHistoryItem[] = [
+ { id: "apple", titleId: "homehero.chat.history.apple", defaultTitle: "Apple QC", isCurrent: true },
+ { id: "fruit", titleId: "homehero.chat.history.fruit", defaultTitle: "Fruit Sorting" },
+ { id: "pcb", titleId: "homehero.chat.history.pcb", defaultTitle: "PCB Inspection" },
+];
+
+interface ChatInterfaceProps {
+ onComplete: () => void;
+ isActive: boolean;
+}
+
+export default function ChatInterface({ onComplete, isActive }: ChatInterfaceProps) {
+ const [conversationStarted, setConversationStarted] = useState(false);
+ const [visibleMessages, setVisibleMessages] = useState([]);
+ const [isTyping, setIsTyping] = useState(false);
+ const messageTimersRef = useRef([]);
+ const messagesEndRef = useRef(null);
+
+ const startConversation = () => {
+ setConversationStarted(true);
+ };
+
+ useEffect(() => {
+ if (messagesEndRef.current && messagesEndRef.current.parentElement) {
+ const container = messagesEndRef.current.parentElement;
+ container.scrollTop = container.scrollHeight;
+ }
+ }, [visibleMessages]);
+
+ useEffect(() => {
+ if (!isActive || !conversationStarted) {
+ return;
+ }
+
+ chatMessages.forEach((msg) => {
+ if (msg.sender === "ai") {
+ const typingTimer = setTimeout(() => {
+ setIsTyping(true);
+ }, msg.delay - 800);
+ messageTimersRef.current.push(typingTimer);
+ }
+
+ const timer = setTimeout(() => {
+ setIsTyping(false);
+ setVisibleMessages((prev) => [...prev, msg.id]);
+ }, msg.delay);
+ messageTimersRef.current.push(timer);
+ });
+
+ return () => {
+ messageTimersRef.current.forEach(timer => clearTimeout(timer));
+ messageTimersRef.current = [];
+ };
+ }, [isActive, conversationStarted]);
+
+ const handleButtonClick = () => {
+ onComplete();
+ };
+
+ return (
+
-
{children}
diff --git a/src/components/HomeHero/NeuralNetwork/Neural3DNetwork.tsx b/src/components/HomeHero/NeuralNetwork/Neural3DNetwork.tsx
index 63402979..c41fe495 100644
--- a/src/components/HomeHero/NeuralNetwork/Neural3DNetwork.tsx
+++ b/src/components/HomeHero/NeuralNetwork/Neural3DNetwork.tsx
@@ -41,6 +41,11 @@ interface Neural3DNetworkProps {
trainingNodeCount?: number;
physicsUpdateInterval?: number;
performanceTier?: 'high' | 'low';
+ maxNodes?: number;
+ maxTrainingNodes?: number;
+ skipTrainingCleanup?: boolean;
+ enableRotation?: boolean;
+ animationDuration?: number;
}
export const Neural3DNetwork = memo(function Neural3DNetwork({
@@ -59,8 +64,21 @@ export const Neural3DNetwork = memo(function Neural3DNetwork({
onRebuildComplete,
currentFps = 50,
isSmallScreen: isSmallScreenProp,
- performanceTier = 'high'
+ performanceTier = 'high',
+ maxNodes,
+ maxTrainingNodes,
+ skipTrainingCleanup = false,
+ enableRotation,
+ animationDuration = TOTAL_ANIMATION_DURATION,
}: Neural3DNetworkProps) {
+ const nodeCounts = useMemo(() => {
+ const defaults = NODE_COUNTS[performanceTier];
+ return {
+ base: maxNodes != null ? Math.min(maxNodes, defaults.base) : defaults.base,
+ training: maxTrainingNodes != null ? maxTrainingNodes : maxNodes != null ? Math.min(maxNodes, defaults.training) : defaults.training,
+ };
+ }, [performanceTier, maxNodes, maxTrainingNodes]);
+
const groupRef = useRef
+
+ );
+}
diff --git a/src/components/HomeHero/SoftwareWindow/Neural3DCanvas.tsx b/src/components/HomeHero/SoftwareWindow/Neural3DCanvas.tsx
index f29f05c7..4a7e2090 100644
--- a/src/components/HomeHero/SoftwareWindow/Neural3DCanvas.tsx
+++ b/src/components/HomeHero/SoftwareWindow/Neural3DCanvas.tsx
@@ -19,6 +19,11 @@ interface Neural3DCanvasProps {
currentFps: number;
isSmallScreen: boolean;
performanceTier: PerformanceTier;
+ maxNodes?: number;
+ maxTrainingNodes?: number;
+ skipTrainingCleanup?: boolean;
+ enableRotation?: boolean;
+ animationDuration?: number;
}
export default function Neural3DCanvas({
@@ -36,6 +41,11 @@ export default function Neural3DCanvas({
currentFps,
isSmallScreen,
performanceTier,
+ maxNodes,
+ maxTrainingNodes,
+ skipTrainingCleanup,
+ enableRotation,
+ animationDuration,
}: Neural3DCanvasProps) {
return (
diff --git a/src/components/HomeHero/index.tsx b/src/components/HomeHero/index.tsx
index 0fb0e051..005fb276 100644
--- a/src/components/HomeHero/index.tsx
+++ b/src/components/HomeHero/index.tsx
@@ -199,7 +199,7 @@ export default function HomeHero() {
return (
+
+
+
+ History
+
+
+
+ {chatHistory.map((item) => (
+
+
+
+
+
+
+ {item.defaultTitle}
+
+
+ ))}
+
+
+
+
+
+ {!conversationStarted ? (
+
+
+
+
+ ) : (
+ <>
+ {chatMessages.map((msg) => {
+ const isVisible = visibleMessages.includes(msg.id);
+ const isUser = msg.sender === "user";
+
+ if (!isVisible) return null;
+
+ return (
+
+
+
+
+
+
+
+
+ {!isUser && (
+
+ );
+ })}
+
+ {isTyping && (
+
+
+
+ )}
+
+ {msg.defaultContent}
+
+ {msg.hasButton && (
+
+ )}
+
+ {isUser && (
+
+
+
+ )}
+
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -315,18 +316,17 @@ export default function HomeHero() {
Get Started
- document.getElementById("chatbot")?.scrollIntoView({ behavior: "smooth" })}
>
-
-
+ Ask Chatbot
+
+
+
+
Get Started
- document.getElementById("chatbot")?.scrollIntoView({ behavior: "smooth" })}
>
-
-
+ Ask Chatbot
+
document.getElementById("video")?.scrollIntoView({ behavior: "smooth" })}
+ >
+
+ Scroll dummy text
+
+
+
+
+