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

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">