wanwu/deer-flow
1
0
Fork 0
mirror of https://gitee.com/wanwujie/deer-flow synced 2026-04-22 05:34:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add i18n support and add Chinese (#372)

Browse Source 
* feat: add i18n support and add Chinese

* fix: resolve conflicts

* Update en.json with cancle settings

* Update zh.json with settngs cancle

---------

Co-authored-by: johnny0120 <15564476+johnny0120@users.noreply.github.com>
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
Co-authored-by: Willem Jiang <143703838+willem-bd@users.noreply.github.com>
This commit is contained in:
johnny0120
2025-07-12 15:18:28 +08:00
committed by GitHub
parent 136f7eaa4e
commit e1187d7d02
31 changed files with 917 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/app/landing/components/jumbotron.tsx
View File

@@ -4,6 +4,7 @@
import { GithubFilled } from "@ant-design/icons";
import { ChevronRight } from "lucide-react";
import Link from "next/link";
import { useTranslations } from 'next-intl';
import { AuroraText } from "~/components/magicui/aurora-text";
import { FlickeringGrid } from "~/components/magicui/flickering-grid";
@@ -11,6 +12,9 @@ import { Button } from "~/components/ui/button";
import { env } from "~/env";
export function Jumbotron() {
const t = useTranslations('hero');
const tCommon = useTranslations('common');
return (
<section className="flex h-[95vh] w-full flex-col items-center justify-center pb-15">
<FlickeringGrid
@@ -34,15 +38,12 @@ export function Jumbotron() {
<div className="relative z-10 flex flex-col items-center justify-center gap-12">
<h1 className="text-center text-4xl font-bold md:text-6xl">
<span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
Deep Research{" "}
{t('title')}{" "}
</span>
<AuroraText>at Your Fingertips</AuroraText>
<AuroraText>{t('subtitle')}</AuroraText>
</h1>
<p className="max-w-4xl p-2 text-center text-sm opacity-85 md:text-2xl">
Meet DeerFlow, your personal Deep Research assistant. With powerful
tools like search engines, web crawlers, Python and MCP services, it
delivers instant insights, comprehensive reports, and even captivating
podcasts.
{t('description')}
</p>
<div className="flex gap-6">
<Button className="hidden text-lg md:flex md:w-42" size="lg" asChild>
@@ -56,7 +57,7 @@ export function Jumbotron() {
: "/chat"
}
>
Get Started <ChevronRight />
{tCommon('getStarted')} <ChevronRight />
</Link>
</Button>
{!env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY && (
@@ -71,14 +72,14 @@ export function Jumbotron() {
target="_blank"
>
<GithubFilled />
Learn More
{tCommon('learnMore')}
</Link>
</Button>
)}
</div>
</div>
<div className="absolute bottom-8 flex text-xs opacity-50">
<p>* DEER stands for Deep Exploration and Efficient Research.</p>
<p>{t('footnote')}</p>
</div>
</section>
);

10
web/src/app/landing/components/multi-agent-visualization.tsx
View File

@@ -21,6 +21,7 @@ import {
Minimize,
} from "lucide-react";
import "@xyflow/react/dist/style.css";
import { useTranslations } from "next-intl";
import { useCallback, useRef, useState } from "react";
import { Tooltip } from "~/components/deer-flow/tooltip";
@@ -47,6 +48,7 @@ const nodeTypes = {
};
export function MultiAgentVisualization({ className }: { className?: string }) {
const t = useTranslations("chat.multiAgent");
const {
graph: { nodes, edges },
activeStepIndex,
@@ -120,12 +122,12 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
<div className="h-4 shrink-0"></div>
<div className="flex h-6 w-full shrink-0 items-center justify-center">
<div className="bg-muted/50 z-[200] flex rounded-3xl px-4 py-2">
<Tooltip title="Move to the previous step">
<Tooltip title={t("moveToPrevious")}>
<Button variant="ghost" onClick={prevStep}>
<ChevronLeft className="size-5" />
</Button>
</Tooltip>
<Tooltip title="Play / Pause">
<Tooltip title={t("playPause")}>
<Button variant="ghost" onClick={togglePlay}>
{playing ? (
<Pause className="size-5" />
@@ -134,7 +136,7 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
)}
</Button>
</Tooltip>
<Tooltip title="Move to the next step">
<Tooltip title={t("moveToNext")}>
<Button
variant="ghost"
onClick={() => {
@@ -158,7 +160,7 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
}}
/>
</div>
<Tooltip title="Toggle fullscreen">
<Tooltip title={t("toggleFullscreen")}>
<Button
variant="ghost"
size="icon"

105
web/src/app/landing/sections/case-study-section.tsx
View File

@@ -3,93 +3,52 @@
import { Bike, Building, Film, Github, Ham, Home, Pizza } from "lucide-react";
import { Bot } from "lucide-react";
import { useTranslations } from "next-intl";
import { BentoCard } from "~/components/magicui/bento-grid";
import { SectionHeader } from "../components/section-header";
const caseStudies = [
{
id: "eiffel-tower-vs-tallest-building",
icon: Building,
title: "How tall is Eiffel Tower compared to tallest building?",
description:
"The research compares the heights and global significance of the Eiffel Tower and Burj Khalifa, and uses Python code to calculate the multiples.",
},
{
id: "github-top-trending-repo",
icon: Github,
title: "What are the top trending repositories on GitHub?",
description:
"The research utilized MCP services to identify the most popular GitHub repositories and documented them in detail using search engines.",
},
{
id: "nanjing-traditional-dishes",
icon: Ham,
title: "Write an article about Nanjing's traditional dishes",
description:
"The study vividly showcases Nanjing's famous dishes through rich content and imagery, uncovering their hidden histories and cultural significance.",
},
{
id: "rental-apartment-decoration",
icon: Home,
title: "How to decorate a small rental apartment?",
description:
"The study provides readers with practical and straightforward methods for decorating apartments, accompanied by inspiring images.",
},
{
id: "review-of-the-professional",
icon: Film,
title: "Introduce the movie 'Léon: The Professional'",
description:
"The research provides a comprehensive introduction to the movie 'Léon: The Professional', including its plot, characters, and themes.",
},
{
id: "china-food-delivery",
icon: Bike,
title: "How do you view the takeaway war in China? (in Chinese)",
description:
"The research analyzes the intensifying competition between JD and Meituan, highlighting their strategies, technological innovations, and challenges.",
},
{
id: "ultra-processed-foods",
icon: Pizza,
title: "Are ultra-processed foods linked to health?",
description:
"The research examines the health risks of rising ultra-processed food consumption, urging more research on long-term effects and individual differences.",
},
{
id: "ai-twin-insurance",
icon: Bot,
title: 'Write an article on "Would you insure your AI twin?"',
description:
"The research explores the concept of insuring AI twins, highlighting their benefits, risks, ethical considerations, and the evolving regulatory.",
},
const caseStudyIcons = [
{ id: "eiffel-tower-vs-tallest-building", icon: Building },
{ id: "github-top-trending-repo", icon: Github },
{ id: "nanjing-traditional-dishes", icon: Ham },
{ id: "rental-apartment-decoration", icon: Home },
{ id: "review-of-the-professional", icon: Film },
{ id: "china-food-delivery", icon: Bike },
{ id: "ultra-processed-foods", icon: Pizza },
{ id: "ai-twin-insurance", icon: Bot },
];
export function CaseStudySection() {
const t = useTranslations("landing.caseStudies");
const cases = t.raw("cases") as Array<{ title: string; description: string }>;
return (
<section className="relative container hidden flex-col items-center justify-center md:flex">
<SectionHeader
anchor="case-studies"
title="Case Studies"
description="See DeerFlow in action through replays."
title={t("title")}
description={t("description")}
/>
<div className="grid w-3/4 grid-cols-1 gap-2 sm:w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{caseStudies.map((caseStudy) => (
<div key={caseStudy.title} className="w-full p-2">
<BentoCard
{...{
Icon: caseStudy.icon,
name: caseStudy.title,
description: caseStudy.description,
href: `/chat?replay=${caseStudy.id}`,
cta: "Click to watch replay",
className: "w-full h-full",
}}
/>
</div>
))}
{cases.map((caseStudy, index) => {
const iconData = caseStudyIcons[index];
return (
<div key={caseStudy.title} className="w-full p-2">
<BentoCard
{...{
Icon: iconData?.icon ?? Building,
name: caseStudy.title,
description: caseStudy.description,
href: `/chat?replay=${iconData?.id}`,
cta: t("clickToWatch"),
className: "w-full h-full",
}}
/>
</div>
);
})}
</div>
</section>
);

87
web/src/app/landing/sections/core-features-section.tsx
View File

@@ -1,87 +1,90 @@
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
import { Bird, Microscope, Podcast, Usb, User } from "lucide-react";
import {
Bird,
Microscope,
Podcast,
Usb,
User,
type LucideProps,
} from "lucide-react";
import { useTranslations } from "next-intl";
import type { ForwardRefExoticComponent, RefAttributes } from "react";
import { BentoCard, BentoGrid } from "~/components/magicui/bento-grid";
import { SectionHeader } from "../components/section-header";
const features = [
type FeatureIcon = {
Icon: ForwardRefExoticComponent<
Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
>;
href: string;
className: string;
};
const featureIcons: Array<FeatureIcon> = [
{
Icon: Microscope,
name: "Dive Deeper and Reach Wider",
description:
"Unlock deeper insights with advanced tools. Our powerful search + crawling and Python tools gathers comprehensive data, delivering in-depth reports to enhance your study.",
href: "https://github.com/bytedance/deer-flow/blob/main/src/tools",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
},
{
Icon: User,
name: "Human-in-the-loop",
description:
"Refine your research plan, or adjust focus areas all through simple natural language.",
href: "https://github.com/bytedance/deer-flow/blob/main/src/graph/nodes.py",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
},
{
Icon: Bird,
name: "Lang Stack",
description:
"Build with confidence using the LangChain and LangGraph frameworks.",
href: "https://www.langchain.com/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-2 lg:col-end-3 lg:row-start-1 lg:row-end-2",
},
{
Icon: Usb,
name: "MCP Integrations",
description:
"Supercharge your research workflow and expand your toolkit with seamless MCP integrations.",
href: "https://github.com/bytedance/deer-flow/blob/main/src/graph/nodes.py",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-2 lg:col-end-3 lg:row-start-2 lg:row-end-3",
},
{
Icon: Podcast,
name: "Podcast Generation",
description:
"Instantly generate podcasts from reports. Perfect for on-the-go learning or sharing findings effortlessly. ",
href: "https://github.com/bytedance/deer-flow/blob/main/src/podcast",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-2 lg:col-end-3 lg:row-start-3 lg:row-end-4",
},
];
export function CoreFeatureSection() {
const t = useTranslations("landing.coreFeatures");
const tCommon = useTranslations("common");
const features = t.raw("features") as Array<{
name: string;
description: string;
}>;
return (
<section className="relative flex w-full flex-col content-around items-center justify-center">
<SectionHeader
anchor="core-features"
title="Core Features"
description="Find out what makes DeerFlow effective."
title={t("title")}
description={t("description")}
/>
<BentoGrid className="w-3/4 lg:grid-cols-2 lg:grid-rows-3">
{features.map((feature) => (
<BentoCard key={feature.name} {...feature} />
))}
{features.map((feature, index) => {
const iconData = featureIcons[index];
return iconData ? (
<BentoCard
key={feature.name}
{...iconData}
{...feature}
background={
<img
alt="background"
className="absolute -top-20 -right-20 opacity-60"
/>
}
cta={tCommon("learnMore")}
/>
) : null;
})}
</BentoGrid>
</section>
);

8
web/src/app/landing/sections/join-community-section.tsx
View File

@@ -3,6 +3,7 @@
import { GithubFilled } from "@ant-design/icons";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { AuroraText } from "~/components/magicui/aurora-text";
import { Button } from "~/components/ui/button";
@@ -10,21 +11,22 @@ import { Button } from "~/components/ui/button";
import { SectionHeader } from "../components/section-header";
export function JoinCommunitySection() {
const t = useTranslations("landing.joinCommunity");
return (
<section className="flex w-full flex-col items-center justify-center pb-12">
<SectionHeader
anchor="join-community"
title={
<AuroraText colors={["#60A5FA", "#A5FA60", "#A560FA"]}>
Join the DeerFlow Community
{t("title")}
</AuroraText>
}
description="Contribute brilliant ideas to shape the future of DeerFlow. Collaborate, innovate, and make impacts."
description={t("description")}
/>
<Button className="text-xl" size="lg" asChild>
<Link href="https://github.com/bytedance/deer-flow" target="_blank">
<GithubFilled />
Contribute Now
{t("contributeNow")}
</Link>
</Button>
</section>

6
web/src/app/landing/sections/multi-agent-section.tsx
View File

@@ -1,16 +1,18 @@
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
import { useTranslations } from "next-intl";
import { MultiAgentVisualization } from "../components/multi-agent-visualization";
import { SectionHeader } from "../components/section-header";
export function MultiAgentSection() {
const t = useTranslations("landing.multiAgent");
return (
<section className="relative flex w-full flex-col items-center justify-center">
<SectionHeader
anchor="multi-agent-architecture"
title="Multi-Agent Architecture"
description="Experience the agent teamwork with our Supervisor + Handoffs design pattern."
title={t("title")}
description={t("description")}
/>
<div className="flex h-[70vh] w-full flex-col items-center justify-center">
<div className="h-full w-full">