diff --git a/docusaurus.config.js b/docusaurus.config.js index e923fcfe0e..c801117fe3 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -294,7 +294,7 @@ const marketingNav = { { name: "AI on ICP", href: "/ai", - description: "Run AI models as real smart contracts", + description: "Secure and Trusted AI onchain", }, /* { @@ -334,7 +334,7 @@ const marketingNav = { },*/ ], featured: { - title: "Run AI models as real smart contracts", + title: "Secure and Trusted AI onchain", href: "/ai", image: "/img/nav/featured-ai.webp", }, diff --git a/src/components/AIManifestoModal/index.tsx b/src/components/AIManifestoModal/index.tsx new file mode 100644 index 0000000000..482f8bbab1 --- /dev/null +++ b/src/components/AIManifestoModal/index.tsx @@ -0,0 +1,155 @@ +import Link from "@docusaurus/Link"; +import React, { useEffect, useRef, useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +const principles = [ + { + number: "01", + title: "DeAI Is Safe AI", + description: + "DeAI prioritizes user safety by implementing robust security measures and rigorous testing protocols to minimize the risk of unintended consequences or malicious exploitation.", + }, + { + number: "02", + title: "DeAI Is Accessible AI", + description: + "DeAI makes advanced AI available to all and aims to maximize contributions to a prosperous future for all beings on the planet.", + }, + { + number: "03", + title: "DeAI Is Self-Sovereign AI", + description: + "Users should have complete control over their AI. Your AI should work for you, reflect your values and serve your needs without external interference.", + }, + { + number: "04", + title: "DeAI Is Secure AI", + description: + "Privacy is a guarantee, not just a feature. DeAI ensures your data remains your own, safe from prying eyes and misuse.", + }, + { + number: "05", + title: "DeAI Is Participatory AI", + description: + "By allowing open contributions and attributing the created value back to the owner, DeAI enables everyone to participate in shaping the AI revolution and benefiting from it.", + }, + { + number: "06", + title: "DeAI is Responsible AI", + description: + "User empowerment and respecting stakeholders' best interests are topmost priorities for DeAI. This includes best efforts to be resource-efficient and deliver sustainable solutions.", + }, + { + number: "07", + title: "DeAI Is Verifiable AI", + description: + "The open-source nature of DeAI allows anyone to inspect the underlying code and algorithms for transparency in how the AI functions. By enabling thorough inspection and verification, DeAI systems promote accountability to identify and rectify errors or biases in the AI's behavior.", + }, +]; + +interface ManifestoPrincipleProps { + number: string; + title: string; + description: string; +} + +const ManifestoPrinciple: React.FC = ({ + number, + title, + description, +}) => { + return ( +
+
+ {number} +

{title}

+
+

{description}

+
+ ); +}; + +const AIManifestoModal: React.FC<{ + onClose: () => void; +}> = ({ onClose }) => { + const overlayRef = useRef(); + + return ( + +
+
e.stopPropagation()} + > +
+ +
+
+ {" "} +
+
+

+ Manifesto for Decentralized AI (DeAI) +

+

+ In an era where Artificial Intelligence (AI) is increasingly + central to our daily lives, the power and control over these + transformative technologies must not be confined to a few + centralized entities. We envision a future where AI is + democratized, broadly empowering, and aligned with the needs and + values of all users. This manifesto lays out the principles and + reasons for decentralizing AI and advocating for a fair, + transparent, and user-centric AI ecosystem. +

+
+ {principles.map((principle, index) => ( + + ))} +
+

+ Join us in the movement towards Decentralized AI. Together, we + can create an AI ecosystem that works for everyone and provides + control, privacy, and fairness in the AI technologies that shape + our lives. +

+
+
+
+
+ + ); +}; + +export default AIManifestoModal; diff --git a/src/components/Common/Icons/ChevronDown.tsx b/src/components/Common/Icons/ChevronDown.tsx new file mode 100644 index 0000000000..2b895f28a7 --- /dev/null +++ b/src/components/Common/Icons/ChevronDown.tsx @@ -0,0 +1,16 @@ +import React from "react"; +const ChevronDown: React.FC<{ className?: string }> = ({ className }) => { + return ( + + + + ); +}; + +export default ChevronDown; diff --git a/src/components/Common/Icons/ChevronUp.tsx b/src/components/Common/Icons/ChevronUp.tsx new file mode 100644 index 0000000000..7a10728966 --- /dev/null +++ b/src/components/Common/Icons/ChevronUp.tsx @@ -0,0 +1,16 @@ +import React from "react"; +const ChevronUp: React.FC<{ className?: string }> = ({ className }) => { + return ( + + + + ); +}; + +export default ChevronUp; diff --git a/src/components/Common/LightHeroStyles/index.tsx b/src/components/Common/LightHeroStyles/index.tsx new file mode 100644 index 0000000000..d489b8c09d --- /dev/null +++ b/src/components/Common/LightHeroStyles/index.tsx @@ -0,0 +1,18 @@ +import { css } from "@site/src/utils/dummy-css"; +import React from "react"; + +export default ({ bgColor = "var(--ifm-color-primary)" }) => { + return ( + <> + + + ); +}; diff --git a/src/components/Common/VideoCard/index.tsx b/src/components/Common/VideoCard/index.tsx index d422ad5d61..051c15642e 100644 --- a/src/components/Common/VideoCard/index.tsx +++ b/src/components/Common/VideoCard/index.tsx @@ -2,6 +2,7 @@ import Link from "@docusaurus/Link"; import PlaySVG from "@site/static/img/svgIcons/play.svg"; import clsx from "clsx"; import React, { ReactNode } from "react"; +import LinkArrowUpRight from "../Icons/LinkArrowUpRight"; export const PlayButton: React.FC<{}> = ({}) => { return ( @@ -17,19 +18,46 @@ export const ImageOnlyVideoCard: React.FC<{ className?: string; }> = ({ image, href, className = "" }) => { return ( - + + ); }; +export const TitleVideoCard: React.FC<{ + image: string; + href: string; + title: string; + className?: string; +}> = ({ image, href, title, className = "" }) => { + return ( +
+ + {title} + + +
+

{title}

+
+ + Watch the video + + +
+
+
+ ); +}; + const VideoCard: React.FC<{ title: string; label?: string; diff --git a/src/components/LandingPage/Hero/Cards.tsx b/src/components/LandingPage/Hero/Cards.tsx index 5c4ad6d5e4..256543d914 100644 --- a/src/components/LandingPage/Hero/Cards.tsx +++ b/src/components/LandingPage/Hero/Cards.tsx @@ -177,26 +177,26 @@ export const CardsSection = () => { -
+
-
+

- Make AI immune to cyber attacks + Secure and Trusted AI onchain

- Decentralize Al to make it tamperproof and unstoppable, and - autonomous if needed + Benefit from the security, resilience, and power of the ICP + blockchain.

- - Find out more + + Build now
-
+
diff --git a/src/css/custom.scss b/src/css/custom.scss index 092819c340..8967e45ca8 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -555,6 +555,17 @@ div[class^="announcementBarContent"] { } } +.hide-scrollbar { + /*FireFox*/ + scrollbar-width: none; + /*IE10+*/ + -ms-overflow-style: -ms-autohiding-scrollbar; +} +.hide-scrollbar::-webkit-scrollbar { + /*Chrome, Safari, Edge*/ + display: none; +} + @tailwind base; @tailwind components; @tailwind utilities; diff --git a/src/pages/ai.tsx b/src/pages/ai.tsx index bb071d3231..80efa83c08 100644 --- a/src/pages/ai.tsx +++ b/src/pages/ai.tsx @@ -1,730 +1,1635 @@ +import React, { useEffect, useRef, useState } from "react"; import Link from "@docusaurus/Link"; -import DarkHeroStyles from "@site/src/components/Common/DarkHeroStyles"; +import AnimateSpawn from "@site/src/components/Common/AnimateSpawn"; +import LinkArrowRight from "@site/src/components/Common/Icons/LinkArrowRight"; +import ShareMeta from "@site/src/components/Common/ShareMeta"; import transitions from "@site/static/transitions.json"; import Layout from "@theme/Layout"; -import { motion } from "framer-motion"; -import React, { useRef } from "react"; -import AnimateSpawn from "../components/Common/AnimateSpawn"; -import LinkArrowRight from "../components/Common/Icons/LinkArrowRight"; -import LinkArrowUpRight from "../components/Common/Icons/LinkArrowUpRight"; -import LinkCardsSection from "../components/Common/LinkCardsSection"; -import ShareMeta from "../components/Common/ShareMeta"; -import { useFontsLoaded } from "@site/src/utils/use-fonts-loaded"; -import VideoCard from "../components/Common/VideoCard/index"; -// import youtubeData from "@site/.docusaurus/youtube/default/youtube.json"; -import { NewsCard } from "../components/NewsPage/Cards"; import clsx from "clsx"; -import CodeBlockString from "../theme/CodeBlock/Content/String"; -import { useDarkHeaderInHero } from "../utils/use-dark-header-in-hero"; +import { motion, AnimatePresence, useAnimation } from "framer-motion"; +import LightHeroStyles from "@site/src/components/Common/LightHeroStyles"; +import VideoCard, { + ImageOnlyVideoCard, + TitleVideoCard, +} from "@site/src/components/Common/VideoCard"; +import eventsData from "@site/.docusaurus/airtable/default/airtable-events.json"; +import LinkArrowUpRight from "@site/src/components/Common/Icons/LinkArrowUpRight"; +import AIManifestoModal from "@site/src/components/AIManifestoModal"; +import { useElementSize } from "@site/src/utils/use-element-size"; +import { useLocation } from "@docusaurus/router"; +import LinkArrowUp from "../components/Common/Icons/LinkArrowUp"; +import LinkArrowDown from "../components/Common/Icons/LinkArrowDown"; +import ChevronDown from "../components/Common/Icons/ChevronDown"; +import ChevronUp from "../components/Common/Icons/ChevronUp"; +import { useInView } from "react-intersection-observer"; +import Slider from "react-slick"; +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; +import "../components/LandingPage/Hero/SectionSlider/index.css"; -interface TrustCardProps { +interface FeatureCardProps { imageSrc: string; - imageAlt: string; title: string; - description: React.ReactNode; - link?: string; - linkText?: string; + description: string; + badge?: string; } -const MotionLink = motion(Link); +const FeatureCard: React.FC = ({ + imageSrc, + title, + description, + badge, +}) => { + return ( +
+ +
+ {title} + {description} +
+ {badge && ( +
+ {badge} +
+ )} +
+ ); +}; -const trustCards = [ +interface RoadmapItemProps { + number: string; + title: string; + date?: string; +} + +const RoadmapItem: React.FC = ({ number, title, date }) => { + return ( +
+

{number}

+
+ {date && ( + + )} +

+ {title} +

+
+
+ ); +}; + +interface AIFeatureCardProps { + number: string; + icon?: string; + title: string; + features?: string[]; +} + +const AIFeatureCard: React.FC = ({ + number, + icon, + title, + features, +}) => { + return ( +
+ {" "} +
+ {number} + +
+
+

{title}

+
    + {features.map((item, index) => ( +
  • + + {item} +
    • + ))} +
+
+
+ ); +}; + +interface ScrollableItemProps { + number: string; + title: string; + date?: string; + icon?: string; + features?: string[]; +} + +interface ScrollableSectionProps { + items: ScrollableItemProps[]; + type: "roadmap" | "aiFeatures"; + title?: string; +} + +const ScrollableSection: React.FC = ({ + items, + type, + title, +}) => { + const scrollContainerRef = useRef(null); + const [activeIndex, setActiveIndex] = useState(0); + + useEffect(() => { + const handleScroll = () => { + const container = scrollContainerRef.current; + if (container) { + const scrollLeft = container.scrollLeft; + const containerWidth = container.clientWidth; + const scrollWidth = container.scrollWidth; + const itemWidth = + type === "roadmap" ? containerWidth : containerWidth * 0.8; + + let newIndex = Math.round(scrollLeft / itemWidth); + + if (scrollLeft + containerWidth >= scrollWidth - 10) { + newIndex = items.length - 1; + } + + setActiveIndex(newIndex); + } + }; + + const container = scrollContainerRef.current; + if (container) { + container.addEventListener("scroll", handleScroll); + return () => container.removeEventListener("scroll", handleScroll); + } + }, [items.length, type]); + + const ItemComponent = type === "roadmap" ? RoadmapItem : AIFeatureCard; + + return ( +
+ {title && ( + {title} + )} +
+
+ {items.map((item, index) => ( + + ))} +
+
+
+ {items.map((_, index) => ( +
+ ))} +
+
+ ); +}; + +const Collapse: React.FC<{ + title: React.ReactNode; + children: React.ReactNode; + open: boolean; + onClick: () => void; + link: string; +}> = ({ title, children, open, onClick, link }) => { + const ref = useRef(); + const size = useElementSize(ref); + + return ( +
+ +
+
{children}
+
+
+ {children} +
+
+ ); +}; + +const FaqItem = ({ question, answer }) => { + const [isOpen, setIsOpen] = useState(false); + + const toggleOpen = () => setIsOpen(!isOpen); + + return ( + +
+
{question}
+ {isOpen ? ( + + ) : ( + + )} +
+ + {isOpen && ( + +
+

{answer}

+
+ + )} + + + ); +}; + +const ContactCard: React.FC = () => { + return ( + + ); +}; + +const features: FeatureCardProps[] = [ + { + imageSrc: "/img/ai-chain/1a.svg", + title: "Immune to cyber attacks.", + description: + "The integrity of AI models is protected by the blockchain. Unauthorized changes and tampering is not possible, which is crucial for applications in sensitive sectors.", + }, { - imageSrc: "/img/decentralized-ai/trust-icon-1.svg", - imageAlt: "Tamper-proofness icon", - title: "Tamper-proof", + imageSrc: "/img/ai-chain/2a.svg", + title: "Verifiable Inputs and Outputs.", description: - "Computation is replicated across multiple nodes and validated by consensus. There is no single point of trust.", + "AI solutions built on ICP allow to verify inputs and outputs. For use cases like legal compliance, ICP ensures transparency with auditable, verifiable data.", }, { - imageSrc: "/img/decentralized-ai/trust-icon-2.svg", - imageAlt: "Unstoppability icon", - title: "Unstoppable", + imageSrc: "/img/ai-chain/3a.svg", + title: "Privacy-preserving.", description: - "Smart contracts are censorship resistant as they are not controlled by a single entity or legislation.", + "ICP's encryption protects data processed by AI models, making AI useable for confidential data and complying with data protection standards.", + badge: "coming soon", }, { - imageSrc: "/img/decentralized-ai/trust-icon-3.svg", - imageAlt: "Autonomy icon", - title: "Autonomous", + imageSrc: "/img/ai-chain/4a.svg", + title: "Resilient.", description: - "Smart contracts can be made immutable turning them into a permanent compute unit in cyberspace.", + " AI-driven operations like medical care need constant availability. ICP's decentralized smart contracts ensure high availability, keeping AI models secure and operational.", }, { - imageSrc: "/img/decentralized-ai/trust-icon-4.svg", - imageAlt: "Scalability icon", - title: "Scalable", + imageSrc: "/img/ai-chain/5a.svg", + title: "AI-2-X Economy.", description: - "ICP aims to give smart contracts near native performance and scalability. Currently, smart contracts can execute billions of instructions per message and use 4GiB of the main memory and 400GiB of stable memory. The future vision is to give smart contracts access to AI hardware such as GPUs.", + " AI models that run as smart contracts, enable them to autonomously participate in the digital economy by interacting with digital assets such as Bitcoin, Ethereum, Stablecoins, and ICP. This facilitates secure, transparent, and automated transactions and contract management without human intervention.", }, { - imageSrc: "/img/decentralized-ai/trust-icon-5.svg", - imageAlt: "Expressiveness icon", - title: "Expressive", + imageSrc: "/img/ai-chain/6a.svg", + title: "DAO-controlled.", description: - "The virtual machine of ICP is WebAssembly that has a growing ecosystem of languages, tools, and libraries. This allows ICP developers to use open source projects such as ", - link: "https://github.com/sonos/tract", - linkText: "Sonos Tract AI inference engine", + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.", }, ]; -const shortTermRoadmapItems = [ - "Faster deterministic floating-point operations", - "Wasm SIMD (Single-instruction multiple data)", - "Upgrade Wasm memory to 64-bit", +const roadmapData = [ + { + number: "01", + title: "Data storage to run large AI models", + date: "", + }, + { + number: "02", + title: "Optimized floating-point arithmetic for faster AI processing", + date: "", + }, + { + number: "03", + title: "Seamless Integration with Web 2.0", + date: "", + }, + { + number: "04", + title: "GPU acceleration for enterprise-grade AI workloads", + date: "2025", + }, ]; -const longTermRoadmapItems = [ - "Explore API for deterministic AI computation on GPUs.", - "Develop public specification for nodes with GPUs.", - "Add subnets with the new nodes to ICP.", +const aiFeatures = [ + { + number: "01", + icon: "/img/ai-chain/1b.svg", + title: "Infrastructure and resources", + features: ["Compute marketplaces", "Data storage", "AI Smart Contracts"], + }, + { + number: "02", + icon: "/img/ai-chain/2b.svg", + title: "Development and training", + features: ["AI development", "Model training", "Data marketplace"], + }, + { + number: "03", + icon: "/img/ai-chain/3b.svg", + title: "AI inference", + features: ["Data analysis", "Content generation", "AI model marketplace"], + }, + { + number: "04", + icon: "/img/ai-chain/4b.svg", + title: "AI verification and security", + features: [ + "Content provenance", + "Model verification", + "Regulatory compliance", + ], + }, ]; -const TrustCard: React.FC = ({ - imageSrc, - imageAlt, - title, - description, - link, - linkText, -}) => ( -
- {imageAlt} -
- {title} +const projects: { + imageUrl: string; + title: string; + body: React.ReactNode; + link: string; +}[] = [ + { + title: "DecideAI", + body: "DecideAI offers products that enhance the decentralized AI ecosystem, including Decide ID, an AI-powered Proof of Personhood, and Decide Cortex, a blockchain-based LLM marketplace.", + link: "https://decideai.xyz/", + imageUrl: "/img/ai-chain/decideai.webp", + }, + { + title: "Kinic", + body: "Kinic's mission is to bring AI ownership to the world via personal AI. Kinic's Vector Database solution addresses a pressing need for tamperproof data to fine-tune LLM for queries.", + link: "https://ai.kinic.io", + imageUrl: "/img/ai-chain/kinic.webp", + }, + { + title: "Elna.ai", + body: "ELNA provides the fundamental building blocks for AI development like vector database, LLM inference engines, and deployment tools — creators don't have to build from scratch, and instead use these tools to deploy part of their AI application onchain.", + link: "https://www.elna.ai/", + imageUrl: "/img/ai-chain/elnaai.webp", + }, +]; + +interface FaqData { + question: string; + answer: string; +} + +const faqData: FaqData[] = [ + { + question: "What is AI onchain and why is it important?", + answer: + "AI onchain refers to running AI models and applications directly on the blockchain, providing decentralized, tamper-proof, and transparent AI solutions. This approach ensures enhanced security, privacy, and data integrity, which are crucial for applications in sectors like finance, healthcare, and beyond.", + }, + { + question: "How does ICP enable AI onchain?", + answer: + "The Internet Computer (ICP) enables AI onchain through its unique architecture that supports scalable, secure, and fully decentralized smart contracts called canisters. These canisters allow AI models to run directly on the blockchain, eliminating the need for traditional cloud-based AI solutions.", + }, + { + question: + "What are the benefits of running AI onchain compared to traditional methods?", + answer: + "Running AI onchain offers several benefits, including enhanced data privacy, resistance to censorship, reduced dependency on centralized cloud providers, and the ability to leverage blockchain's transparency and security features.", + }, + { + question: + "How can developers get started with AI on the Internet Computer?", + answer: + "Developers can start by accessing our comprehensive resources, including developer documentation, sample code, demos, and our GitHub repository. These tools provide step-by-step guidance on building and deploying AI applications on ICP. In addition a good starting point is to connect to the DeAI dev group.", + }, + { + question: + "What tools and programming languages are supported for developing AI on ICP?", + answer: + "ICP supports development in languages such as Motoko and Rust, which are optimized for creating and managing canisters. These canisters can run AI models and connect with external data sources, providing a flexible environment for AI development.", + }, + { + question: "What are the use cases for AI on ICP?", + answer: + "Use cases for AI on ICP span various industries, including finance, healthcare, supply chain management, and more. AI onchain can be used for applications such as fraud detection, predictive analytics, personalized medicine, and automated decision-making systems.", + }, + { + question: + "What makes ICP different from other blockchains for AI applications?", + answer: + "ICP stands out due to its ability to run AI fully onchain, its scalability, and its low-cost computation. Unlike other blockchains that might rely on off-chain solutions, ICP offers a seamless, fully integrated environment for decentralized AI.", + }, + { + question: + "How does ICP ensure the privacy and security of AI models and data?", + answer: + "ICP utilizes advanced cryptographic techniques and a decentralized architecture to protect AI models and data from tampering, unauthorized access, and data breaches, ensuring that sensitive information remains secure.", + }, + { + question: "Can existing AI models be deployed on ICP?", + answer: + "Yes, existing AI models can be adapted and deployed on ICP. Developers may need to convert their models into a compatible format and use ICP's canister technology to run them onchain.", + }, + { + question: + "Where can I find community support and further learning resources?", + answer: + "Developers and entrepreneurs can join our community forums, attend workshops, and participate in webinars. Additionally, our website provides links to detailed tutorials, the latest updates, and a vibrant community ready to support your journey with AI on ICP.", + }, +]; + +const heroFeatures = [ + "Immune to cyber attacks", + "Resilient", + "Verifiable", + "DAO-controlled", + "Privacy-preserving", + "AI-2-X Economy", +]; + +const HeroFeaturesList = () => { + return ( +
+ {heroFeatures.map((feature, index) => ( +
+ {index !== 0 && ( + + + + + + + + + + + + )} + + {feature} +
+ ))}
- {link && linkText ? ( -
- {description} - - {linkText} - {" "} - in their smart contracts. + ); +}; + +const sliderData = [ + { + title: "DecideAI implements GPT-2 LLM within ICP", + source: "Cryptonomist", + image: "/img/ai-chain/slider-1.svg", + link: "https://en.cryptonomist.ch/2024/08/29/crypto-and-ai-decideai-implements-the-linguistic-model-gpt-2-llm-within-the-blockchain-internet-computer-icp/", + }, + { + title: "DFINITY Foundation Offering $5M Grant to boost DeAI", + source: "AlexaBlockchain", + image: "/img/ai-chain/slider-2.svg", + link: "https://alexablockchain.com/dfinity-foundation-offering-5m-grant-to-boost-decentralized-ai/", + }, + { + title: "ELNA — Build Your-own AI Assistant on ICP", + source: "Elna.ai", + image: "/img/ai-chain/slider-3.svg", + link: "https://www.elna.ai/index.html#news", + }, + { + title: "Dominic Williams unveils World-first AI onchain demo", + source: "Youtube.com/dfinity", + image: "/img/ai-chain/slider-4.svg", + link: "https://www.youtube.com/watch?v=sdthNB-5yag&list=PLuhDt1vhGcrfWz1ZJrAmJBDS6aFADySwt", + }, +]; + +const buttonStyle = { + background: "rgba(255 255 255 / 10%)", + color: "black", + backdropFilter: "blur(20px)", + width: "3rem", + height: "3rem", +}; + +function NextArrow(props) { + const { className, style, onClick } = props; + return ( +
+ + + +
+ ); +} + +function PrevArrow(props) { + const { className, style, onClick } = props; + return ( +
+ + + +
+ ); +} + +const CardWithImage: React.FC<{ + title: string; + source: string; + image: string; + href: string; +}> = ({ title, source, image, href }) => { + return ( + +
+

+ {title} +

+

{source}

- ) : ( -
{description}
- )} -
-); + + + ); +}; + +const css = ` + .slick-prev:before, + .slick-next:before { + display: none; + } + + .slick-prev svg, + .slick-next svg { + transform: scale(.5); + transition: transform .2s cubic-bezier(0.3, 0.7, 0, 1); + } + + .slick-prev svg { + transform: rotate(180deg) scale(.5); + } + + .slick-prev:hover svg, + .slick-next:hover svg { + transform: scale(.7); + } + + .slick-prev:hover svg { + transform: rotate(180deg) scale(.7); + } + + .slick-dots { + bottom: -3rem; + } + + .slick-dots li button:before { + display: none; + } + + .slick-dots li { + margin: 0; + } + + .slick-dots li button { + background: rgba(24, 24, 24, 0.30); + border: none; + } + + .slick-dots li.slick-active button { + background: #181818; + } + + +`; + +const SectionSlider = () => { + let sliderRef = useRef(null); -const RoadMapList: React.FC<{ items: string[] }> = ({ items }) => { + const settings = { + dots: true, + infinite: true, + slidesToShow: 3, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 2000, + pauseOnHover: true, + centerMode: true, + padding: "20px", + centerPadding: "20px", + swipeToSlide: true, + nextArrow: , + prevArrow: , + responsive: [ + { + breakpoint: 768, + settings: { + slidesToShow: 1, + arrows: false, + }, + }, + ], + }; return ( -
    - {items.map((item, index) => ( -
  • - - {item} -
    • - ))} -
+
+ + (sliderRef = slider)} {...settings}> + {sliderData.map((data, index) => ( +
+ +
+ ))} + +
+ ); +}; + +const MotionLink = motion(Link); +const AnimatedCountUp = ({ end, duration = 2000 }) => { + const [count, setCount] = useState(0); + const controls = useAnimation(); + const [ref, inView] = useInView({ + triggerOnce: true, + threshold: 0.1, + }); + + useEffect(() => { + if (inView) { + controls.start({ + opacity: 1, + y: 0, + transition: { duration: 0.5 }, + }); + + let start = 0; + const increment = end / (duration / 16); + + const timer = setInterval(() => { + start += increment; + setCount(Math.floor(start)); + if (start >= end) { + clearInterval(timer); + setCount(end); + } + }, 16); + + return () => clearInterval(timer); + } + }, [inView, controls]); + + return ( + + {count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")}x + ); }; function AIPage() { - const fontLoaded = useFontsLoaded(); - const heroRef = useRef(null); - const isDark = useDarkHeaderInHero(heroRef); + const [manifestoModalOpen, setManifestoModalOpen] = useState(false); + const [openProjectIndex, setOpenProjectIndex] = useState(0); + const location = useLocation(); + + useEffect(() => { + if (location.hash === "#manifesto") { + openOverlay(); + } + }, [location]); + + function closeOverlay() { + document.body.style.overflow = ""; + setManifestoModalOpen(false); + // Remove the hash from the URL + window.history.pushState( + "", + document.title, + window.location.pathname + window.location.search + ); + } + + function openOverlay() { + document.body.style.overflow = "hidden"; + setManifestoModalOpen(true); + // Add #manifesto to the URL + window.history.pushState( + "", + document.title, + window.location.pathname + window.location.search + "#manifesto" + ); + } return ( - +
- {isDark && } -
+ -
- - Run AI models as real smart contracts - -
- +
+ - Al can be run truly onchain as Internet Computer smart - contracts, making it tamperproof and unstoppable, and autonomous - if needed - - {/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - EXPLORE AI ON ICP - */} -
-
-
-
- Decentralized AI + + + + Dominic Williams on AI on ICP + + + + Al will be at the heart of everything, driving economies and + our daily lives. Al on ICP marks a major technological leap by + bringing{" "} + Al onchain, + ensuring decentralized, tamper-proof, and privacy-preserving + solutions that address critical issues like security, + transparency, and reliability. + +
-
-
+ + +
+ + + Latest Ecosystem news + + + -
- - - - -
- -
-
- + - AI Models on ICP Today - -
- See a series of demos how the Internet Computer has the - capability of running AI in a smart contract. -
- - Watch the playlist - -
-
+ AI onchain: a major technological leap + + + ICP’s advanced AI onchain technology enables six key + attributes that will drive transformative AI use cases across + industries. +
- -
- - - -
- - -
-

- Try out the AI demo by yourself -

-

- Check out the open-source repo on GitHub and tryout the AI - demo by yourself. -

-

- - GO TO GITHUB REPO - -

-
-
- - {`let image = imageops::resize( - &image, 160, 160, FilterType::Triangle); - -let tensor = Array4::from_shape_fn( - (1, 3, 160, 160), |(_, c, y, x)| { - image[(x as u32, y as u32)][c] as f32 / 255.0 -}); - -let result = model.run( - tvec!(Tensor::from(tensor).into()))?;`} - -
+ {features.map((feature, index) => ( + + ))} -
- -
+ +
+
- - A recent study on AI finds that nearly half of the respondents - (49%) are concerned about the misuse of AI for nefarious purposes. - - - Survey in the{" "} + + + TECHNOLOGY + + + R&D at the core of Internet Computer’s AI innovation + {" "} + + AI onchain is made possible by the unique technological + capabilities of the Internet Computer Protocol (ICP). Running AI + as a smart contract on a blockchain is a significant innovation + that is based on DFINITY Foundation’s significant R&D efforts in + this domain. Over the past 6 months, AI computations have been + optimized to run up to 10x faster, enabling larger models to run + onchain. + - Artificial Intelligence Index Report 2024 - {" "} - by Stanford University. - - -
-
- -
-
- - The Tampering Problem - - -

- - Research shows - {" "} - that it is possible to tamper with AI models in an - undetectable way. This means that the integrity of the - AI's output can be compromised without anyone - knowing. -

- +
+
+
+ + + faster + +
+
+ +
- -
- - The Black Box Problem - - -

- Users have no visibility into how their data is used and - how AI models produce responses. This lack of transparency - makes it difficult for users to trust the technology. -

- +
+
+ + 02 + + + Optimized floating-point arithmetic for faster AI + processing.{" "} + {" "} + + ICP's next-gen smart contracts provide orders of magnitude + more compute per transaction compared to + current-generation blockchains. In addition, with newly + added support for WebAssembly 128-bit SIMD, smart + contracts can execute multiple floating point operations + in parallel, making running AI models much faster and more + efficient. + +
-
- +
+
+
+
+ + 03 + + + Seamless Integration with Web 2.0. + {" "} + + ICP is the only blockchain where smart contracts can + directly connect to Web 2.0 services using HTTPS outcalls, + which opens the possibility for AI applications running on + ICP to integrate and fetch data from external services. + + + More on HTTPS outcalls + +
+
+
+
+ +
+
+
+
+
+
+ web gpu +
+
+
+
+ + 04 + + + GPU acceleration for enterprise-grade AI workloads.{" "} + {" "} + + ICP's next-gen smart contracts run on segregated parts of + the Internet Computer known as "subnets". The flexible + architecture of subnets allows the Internet Computer not + only to scale, but to also create subnets with different + characteristics. Work is underway to create subnets with + GPU acceleration, allowing smart contracts to run + enterprise-grade AI models directly onchain. + +
+
+ coming soon +
+
+
+ -
- - What is needed to solve these issues? - +
- - + + AI Demos + +
+ + Dominic Williams, Chief Scientist and Founder of DFINITY + Foundation, demos advancements in AI smart contracts on ICP + + + More videos on AI + +
+
+ +
+ -

Model integrity

-

- Users need assurance that their AI prompts are handled by - untampered models. Traditional software integrity methods, such - as source code analysis, are infeasible for AI models because - they consist of complex numerical weights and extensive - matrices, rather than human-readable code, making direct - verification impossible. -

- - - -

- Data confidentiality -

-

- During training and operation, AI models handle sensitive data, - like medical inquiries or corporate secrets. Users need - guarantees that their information remains secure and doesn't - leak to the model creators, other users, or AI infrastructure - providers. -

- + +
+ + +
+ - -

Availability

-

- AI models will become essential for business processes and - societies in general. As with every critical infrastructure, - solutions must be found to keep AI models resilient to - interruptions and to protect them from censorship. -

+ + Ecosystem + + + The fastest growing AI Ecosystem in Web3. + {" "} + + The ICP ecosystem is home to 60+ AI-related projects. These + dapps cover the entire AI value chain from infrastructure, + development and training, inference to verification and + security. ICP's unique capabilities have made it a preferred + platform for builders of AI dapps. + + + Fastest growing AI Ecosystem in Web3 + - -
- - -
-
-

- Making AI trustworthy -

- - -
-
- - -
+
+
+ + DeAI Manifesto + + + Created by the ICP community, the DeAI manifesto lays out + the principles and reasons for decentralizing AI and + advocating for a fair, transparent, and user-centric AI + ecosystem. Join the movement! + +
+ + Read the full manifesto{" "} + +
+
+ + + +
- - What the future holds - - - Blockchain AI is still in its early stages. Currently, smart - contracts can run small AI models like ImageNet for onchain image - classification. Short-term improvements will decrease latency and - support larger models, while the long-term goal is to enable smart - contracts to perform AI computations on GPUs, allowing both - training and inference of large models fully onchain. - - - Short-term - - - - Long-term - - -
- +
+
+ + DEVELOPERS + + + Build your next AI venture on the Internet Computer.{" "} + + Find all the essentials, including developer documentation, + code samples, demos, and our GitHub repository. + + + + + These resources are designed to help you get started with + creating decentralized AI applications onchain. Our DeAI + developer community is also a great way to start. + +
+ +
+
+ +
+

Learn

+
+ + Overview of AI onchain + + + Docs + +
+
+ +
+

Connect

+
+
+ + Contribute to the discussion + + + ICP Forum + +
+
+ + Connect with developers + + + Discord + +
+
+ + Attend global events + + + Upcoming events + +
+
+
+ + + +
+

Build

+
+
+ + Explore the work + + + GitHub + +
+
+
+ +
+
+

Grow

+
+ + Apply for the DeAI grant + + + Grant application + +
+
+ + Join the accelerator + + + Explore Olympus + +
+
+
+ +
+
- - -
- - News & media - -
- - Get all the news from the Internet Computer ecosystem - - - Explore more news - +
+

FAQ

+
+
+ {faqData.map((item, index) => ( + + ))} +
+
+
-
- - - - - - - - - - - - {" "} - - - {" "} - - - {" "} - -
- - - +
+ {manifestoModalOpen && ( + + )} ); diff --git a/static/img/ai-chain/1a.svg b/static/img/ai-chain/1a.svg new file mode 100644 index 0000000000..a7031a1939 --- /dev/null +++ b/static/img/ai-chain/1a.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/ai-chain/1b.svg b/static/img/ai-chain/1b.svg new file mode 100644 index 0000000000..e82904361d --- /dev/null +++ b/static/img/ai-chain/1b.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/ai-chain/2a.svg b/static/img/ai-chain/2a.svg new file mode 100644 index 0000000000..6c4a51daea --- /dev/null +++ b/static/img/ai-chain/2a.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/ai-chain/2b.svg b/static/img/ai-chain/2b.svg new file mode 100644 index 0000000000..09f5c8f4c8 --- /dev/null +++ b/static/img/ai-chain/2b.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/ai-chain/3a.svg b/static/img/ai-chain/3a.svg new file mode 100644 index 0000000000..878ca498e2 --- /dev/null +++ b/static/img/ai-chain/3a.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/img/ai-chain/3b.svg b/static/img/ai-chain/3b.svg new file mode 100644 index 0000000000..3ea15fbfc5 --- /dev/null +++ b/static/img/ai-chain/3b.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/ai-chain/4a.svg b/static/img/ai-chain/4a.svg new file mode 100644 index 0000000000..bb82ee8b05 --- /dev/null +++ b/static/img/ai-chain/4a.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/img/ai-chain/4b.svg b/static/img/ai-chain/4b.svg new file mode 100644 index 0000000000..b196994649 --- /dev/null +++ b/static/img/ai-chain/4b.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/static/img/ai-chain/5a.svg b/static/img/ai-chain/5a.svg new file mode 100644 index 0000000000..4f3a2f6b64 --- /dev/null +++ b/static/img/ai-chain/5a.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/img/ai-chain/6a.svg b/static/img/ai-chain/6a.svg new file mode 100644 index 0000000000..ca55877d31 --- /dev/null +++ b/static/img/ai-chain/6a.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/img/ai-chain/chain_logo_black.webp b/static/img/ai-chain/chain_logo_black.webp new file mode 100644 index 0000000000..1b1222bfd3 Binary files /dev/null and b/static/img/ai-chain/chain_logo_black.webp differ diff --git a/static/img/ai-chain/chart.svg b/static/img/ai-chain/chart.svg new file mode 100644 index 0000000000..b455f30978 --- /dev/null +++ b/static/img/ai-chain/chart.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/static/img/ai-chain/chart1.svg b/static/img/ai-chain/chart1.svg new file mode 100644 index 0000000000..b42d665e62 --- /dev/null +++ b/static/img/ai-chain/chart1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/static/img/ai-chain/data.svg b/static/img/ai-chain/data.svg new file mode 100644 index 0000000000..d817be7ba6 --- /dev/null +++ b/static/img/ai-chain/data.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/ai-chain/datapond.webp b/static/img/ai-chain/datapond.webp new file mode 100644 index 0000000000..d2605e1cb0 Binary files /dev/null and b/static/img/ai-chain/datapond.webp differ diff --git a/static/img/ai-chain/deai-img.svg b/static/img/ai-chain/deai-img.svg new file mode 100644 index 0000000000..29e27ea09c --- /dev/null +++ b/static/img/ai-chain/deai-img.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/ai-chain/decideai.webp b/static/img/ai-chain/decideai.webp new file mode 100644 index 0000000000..b9a4f168e0 Binary files /dev/null and b/static/img/ai-chain/decideai.webp differ diff --git a/static/img/ai-chain/elna.webp b/static/img/ai-chain/elna.webp new file mode 100644 index 0000000000..88620d8231 Binary files /dev/null and b/static/img/ai-chain/elna.webp differ diff --git a/static/img/ai-chain/elnaai.webp b/static/img/ai-chain/elnaai.webp new file mode 100644 index 0000000000..dac172241c Binary files /dev/null and b/static/img/ai-chain/elnaai.webp differ diff --git a/static/img/ai-chain/gpu.svg b/static/img/ai-chain/gpu.svg new file mode 100644 index 0000000000..16cffdf7bc --- /dev/null +++ b/static/img/ai-chain/gpu.svg @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/ai-chain/icon-check-circle.svg b/static/img/ai-chain/icon-check-circle.svg new file mode 100644 index 0000000000..731cfc2d61 --- /dev/null +++ b/static/img/ai-chain/icon-check-circle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/ai-chain/inference.svg b/static/img/ai-chain/inference.svg new file mode 100644 index 0000000000..a4c202922d --- /dev/null +++ b/static/img/ai-chain/inference.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/ai-chain/islam_el_ashi.webp b/static/img/ai-chain/islam_el_ashi.webp new file mode 100644 index 0000000000..6b71484faf Binary files /dev/null and b/static/img/ai-chain/islam_el_ashi.webp differ diff --git a/static/img/ai-chain/kinic.webp b/static/img/ai-chain/kinic.webp new file mode 100644 index 0000000000..17d214ff30 Binary files /dev/null and b/static/img/ai-chain/kinic.webp differ diff --git a/static/img/ai-chain/pierre_samaties.webp b/static/img/ai-chain/pierre_samaties.webp new file mode 100644 index 0000000000..f8c79e687e Binary files /dev/null and b/static/img/ai-chain/pierre_samaties.webp differ diff --git a/static/img/ai-chain/slider-1.svg b/static/img/ai-chain/slider-1.svg new file mode 100644 index 0000000000..4d44994b6b --- /dev/null +++ b/static/img/ai-chain/slider-1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/ai-chain/slider-2.svg b/static/img/ai-chain/slider-2.svg new file mode 100644 index 0000000000..a1703a3993 --- /dev/null +++ b/static/img/ai-chain/slider-2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/ai-chain/slider-3.svg b/static/img/ai-chain/slider-3.svg new file mode 100644 index 0000000000..5fadd00556 --- /dev/null +++ b/static/img/ai-chain/slider-3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/img/ai-chain/slider-4.svg b/static/img/ai-chain/slider-4.svg new file mode 100644 index 0000000000..9b636578b6 --- /dev/null +++ b/static/img/ai-chain/slider-4.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/static/img/ai-chain/video_ai.webp b/static/img/ai-chain/video_ai.webp new file mode 100644 index 0000000000..5b991ac854 Binary files /dev/null and b/static/img/ai-chain/video_ai.webp differ diff --git a/static/img/home/ai.webp b/static/img/home/ai.webp index 570e8343f3..82fdbb55a4 100644 Binary files a/static/img/home/ai.webp and b/static/img/home/ai.webp differ diff --git a/static/img/nav/featured-ai.webp b/static/img/nav/featured-ai.webp index 6056750678..a6eafe5f84 100644 Binary files a/static/img/nav/featured-ai.webp and b/static/img/nav/featured-ai.webp differ diff --git a/static/img/shareImages/share-ai-chain.webp b/static/img/shareImages/share-ai-chain.webp new file mode 100644 index 0000000000..cb7ba4fed7 Binary files /dev/null and b/static/img/shareImages/share-ai-chain.webp differ diff --git a/tailwind.config.js b/tailwind.config.js index 6e0aa2239b..4e632dad8d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -300,6 +300,8 @@ module.exports = { '.text-gradient-white': '@apply text-gradient-base bg-[linear-gradient(191deg,#ffffff_22.86%,#4e377f_90%)]', '.text-gradient-denver': '@apply text-gradient-base bg-[linear-gradient(90deg,#6A85F1_22.19%,#C572EF_79.9%)]', '.text-gradient-green': '@apply text-gradient-base bg-[linear-gradient(48.09deg,#4DEDD3_-32.7%,#31A782_46.37%,#3B00B9_129.51%)]', + '.text-gradient-violet': '@apply text-gradient-base bg-[linear-gradient(310deg,#ED1E79_37.48%,#522785_86.69%)]', + '.input-text': '@apply block border border-solid rounded-xl tw-paragraph bg-transparent py-[14px] px-4 outline-offset-1', '.input-text-white': '@apply border-white-80 text-white placeholder:text-white-60',