diff --git a/bifrost/app/experiments/TwoBillion.tsx b/bifrost/app/experiments/TwoBillion.tsx index 1dff9ab634..f66b2c1258 100644 --- a/bifrost/app/experiments/TwoBillion.tsx +++ b/bifrost/app/experiments/TwoBillion.tsx @@ -60,7 +60,7 @@ export const TwoBillion = ({ className }: { className?: string }) => ( width="1410.29" height="311.979" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > @@ -84,8 +84,8 @@ export const TwoBillion = ({ className }: { className?: string }) => ( y2="256.5" gradientUnits="userSpaceOnUse" > - - + + ( y2="302.5" gradientUnits="userSpaceOnUse" > - - + + ( y2="142.5" gradientUnits="userSpaceOnUse" > - - + + diff --git a/bifrost/app/experiments/page.tsx b/bifrost/app/experiments/page.tsx index 38524db021..b47ef25d9d 100644 --- a/bifrost/app/experiments/page.tsx +++ b/bifrost/app/experiments/page.tsx @@ -27,9 +27,9 @@ const LightPurple = ({ className }: { className?: string }) => ( width="1631" height="1631" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ( width="1760.97" height="1232.46" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ( width="1631" height="1631" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ( width="1950.73" height="1720.48" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ( width="1631" height="1631" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ( width="1697" height="1546" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + { const [isHovered, setIsHovered] = useState(false); @@ -46,7 +47,7 @@ const CTA = () => {
@@ -59,11 +60,17 @@ const CTA = () => {
@@ -98,9 +105,9 @@ const CTA = () => { @@ -108,9 +115,9 @@ const CTA = () => { @@ -127,8 +134,9 @@ const CTA = () => { @@ -136,8 +144,9 @@ const CTA = () => { @@ -145,9 +154,9 @@ const CTA = () => { @@ -155,9 +164,9 @@ const CTA = () => { @@ -165,8 +174,9 @@ const CTA = () => { @@ -175,7 +185,8 @@ const CTA = () => { imgSrc="/static/home/logo4.webp" className={cn( "w-28 h-28 2xl:w-32 2xl:h-32 absolute top-1/4 right-10 transition-all duration-1000", - isHovered && "right-1/2 translate-x-[550px] top-1/2 rotate-[-45deg]" + isHovered && + "right-1/2 translate-x-[550px] top-1/2 2xl:top-1/4 rotate-[-45deg]" )} />
diff --git a/bifrost/components/home/Companies.tsx b/bifrost/components/home/Companies.tsx index e0d7e38846..dc899fdbd4 100644 --- a/bifrost/components/home/Companies.tsx +++ b/bifrost/components/home/Companies.tsx @@ -6,17 +6,18 @@ const Companies = () => { return (
-
    + {/*
      */} +
        {( [ - ["/static/qawolf.webp", "qawolf", 99, 33], - ["/static/sunrun.webp", "sunrun", 83, 33], - ["/static/filevine.webp", "filevine", 81, 33], - ["/static/slate.webp", "slate", 65, 33], - ["/static/mintlify.svg", "mintlify", 94, 33], - ["/static/upenn.webp", "upenn", 83, 33], - ["/static/togetherai.webp", "togetherai", 106, 33], - ["/static/swiss.webp", "swiss red cross", 150, 33], + ["/static/togetherai.webp", "togetherai", 169, 53], + ["/static/qawolf.webp", "qawolf", 157, 53], + ["/static/sunrun.webp", "sunrun", 132, 53], + ["/static/filevine.webp", "filevine", 130, 53], + ["/static/slate.webp", "slate", 104, 53], + ["/static/mintlify.svg", "mintlify", 150, 53], + ["/static/upenn.webp", "upenn", 132, 53], + ["/static/swiss.webp", "swiss red cross", 240, 53], ] as const ).map((src, index) => (
      • diff --git a/bifrost/components/home/Evaluate.tsx b/bifrost/components/home/Evaluate.tsx index 78cf2e0520..6927dcab78 100644 --- a/bifrost/components/home/Evaluate.tsx +++ b/bifrost/components/home/Evaluate.tsx @@ -9,10 +9,10 @@ import EvaluateSVG from "@/public/static/home/evaluate"; const Evaluate = () => { const [isQuestionOpen, setIsQuestionOpen] = useState(false); return ( -
        +
        -
        +

        02

        @@ -24,7 +24,7 @@ const Evaluate = () => { Prevent regression and improve quality over-time -

        +

        Monitor performance in real-time and catch regressions pre-deployment with LLM-as-a-judge or custom evals

        @@ -58,7 +58,7 @@ const Evaluate = () => {
        setIsQuestionOpen(!isQuestionOpen)} > @@ -67,7 +67,9 @@ const Evaluate = () => { "flex justify-between items-center transition-all duration-300" )} > -

        What is online and offline evaluation?

        +

        + What is online and offline evaluation? +

        {isQuestionOpen ? ( @@ -85,10 +87,10 @@ const Evaluate = () => { )} >
        -

        +

        Online evaluation tests systems in real-time using live data - and actual user interactions. It’s useful to capture dynamic - real-world scenarios.
        + and actual user interactions. It's useful to capture + dynamic real-world scenarios.

        In contrast, offline evaluation occurs in controlled, simulated environments using previous requests or synthetic diff --git a/bifrost/components/home/Experiment.tsx b/bifrost/components/home/Experiment.tsx index 4ede573e7f..4ae9c11e41 100644 --- a/bifrost/components/home/Experiment.tsx +++ b/bifrost/components/home/Experiment.tsx @@ -321,7 +321,7 @@ const Experiment = () => { Push high-quality prompt changes to production -

        +

        Tune your prompts and justify your iterations with quantifiable data, not just “vibes”.

        diff --git a/bifrost/components/home/FAQ.tsx b/bifrost/components/home/FAQ.tsx index 912f365c39..c29f53bc92 100644 --- a/bifrost/components/home/FAQ.tsx +++ b/bifrost/components/home/FAQ.tsx @@ -28,6 +28,7 @@ const FAQ = () => { limiting, API key management. +
        I don't want to use Helicone's Proxy, can I still use @@ -45,6 +46,7 @@ const FAQ = () => { infrastructure. +
        How do you calculate the cost of LLM requests?{" "} @@ -60,6 +62,7 @@ const FAQ = () => { Pricing Calculator. +
        diff --git a/bifrost/components/home/Hero.tsx b/bifrost/components/home/Hero.tsx index 922b3aefec..25b7f10046 100644 --- a/bifrost/components/home/Hero.tsx +++ b/bifrost/components/home/Hero.tsx @@ -30,9 +30,9 @@ const Hero = () => {

        Ship your AI app with confidence

        -

        - The all-in-one platform to monitor, debug and improve
        - production-ready LLM applications. +

        + The all-in-one platform to monitor, debug and improve production-ready + LLM applications.

        ); diff --git a/bifrost/components/home/LLMLifecycle.tsx b/bifrost/components/home/LLMLifecycle.tsx index 749fba259e..c39a3742b9 100644 --- a/bifrost/components/home/LLMLifecycle.tsx +++ b/bifrost/components/home/LLMLifecycle.tsx @@ -9,7 +9,7 @@ const SVG = () => ( { "py-16 md:py-36 grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-16 relative z-10" )} > -
        -

        - Designed for the{" "} - entire LLM lifecycle -

        -

        - The CI workflow to take your LLM application from MVP to production, - and from production to perfection. -

        +
        +
        +

        + {/*

        */} + Designed for the{" "} + entire LLM lifecycle +

        +

        + The CI workflow to take your LLM application from MVP to + production, and from production to perfection. +

        +
        +
        +

        + Adapted from an illustration by GeeTest and YorKun 右可, licensed + under{" "} + + CC BY 4.0. + +

        +
        ); diff --git a/bifrost/components/home/Log.tsx b/bifrost/components/home/Log.tsx index 3fa8b0b4f4..3e730283f4 100644 --- a/bifrost/components/home/Log.tsx +++ b/bifrost/components/home/Log.tsx @@ -16,7 +16,7 @@ const Log = () => {

        Dive deep into each trace and debug your agent with ease

        -

        +

        Visualize your multi-step LLM interactions, log requests in real-time and pinpoint root cause of errors.

        diff --git a/bifrost/components/home/OpenSource.tsx b/bifrost/components/home/OpenSource.tsx index c66b331aa3..e7400643bf 100644 --- a/bifrost/components/home/OpenSource.tsx +++ b/bifrost/components/home/OpenSource.tsx @@ -194,7 +194,7 @@ const OpenSource = async () => {

        Proudly open-source

        -

        +

        We value transparency and we believe in the power of community.

        @@ -284,9 +284,9 @@ const OpenSource = async () => { -
        +

        Built by Helicone

        @@ -314,7 +314,6 @@ const OpenSource = async () => {

        Built by Helicone

        -

        Open Stats diff --git a/bifrost/components/home/Production.tsx b/bifrost/components/home/Production.tsx index 7e8693879f..ec24f25773 100644 --- a/bifrost/components/home/Production.tsx +++ b/bifrost/components/home/Production.tsx @@ -18,7 +18,8 @@ const Production = () => { Turn complexity and abstraction to{" "} actionable insights

        -

        + {/*

        */} +

        Unified insights across all providers to quickly detect hallucinations, abuse and performance issues.

        diff --git a/bifrost/components/home/Prototype.tsx b/bifrost/components/home/Prototype.tsx index a0651d3a57..67e8f8d44a 100644 --- a/bifrost/components/home/Prototype.tsx +++ b/bifrost/components/home/Prototype.tsx @@ -32,9 +32,9 @@ const Prototype = () => { >("dashboard"); return ( -
        +
        -
        +
        -
        +
        Requests -
        -
        + {openedPage !== "requests" && ( + <> +
        +
        + + )}
        @@ -148,15 +160,19 @@ const PrototypeSidebar = ({
        Sessions -
        -
        + {openedPage !== "sessions" && ( + <> +
        +
        + + )}
        { return (
        -
        -

        +
        +

        The ability to test prompt variations on production traffic without touching a line of code is magical.{" "} - It feels like we’re cheating; it’s just that good! + It feels like we're cheating; it's just that good!

        -
        + {/*
        */} +
        qawolf -
        +
        nishant shukla -
        -

        - Nishant Shukla -

        -

        Sr. Director of AI

        -
        +

        + Nishant Shukla +

        +

        + Sr. Director of AI +

        + {/*
        */}
        diff --git a/bifrost/components/home/Quote2.tsx b/bifrost/components/home/Quote2.tsx index b0a1f94c0f..dc6ec4f80d 100644 --- a/bifrost/components/home/Quote2.tsx +++ b/bifrost/components/home/Quote2.tsx @@ -18,8 +18,8 @@ const Quote2 = () => {
        setIsQuestionOpen(!isQuestionOpen)} > @@ -29,7 +29,7 @@ const Quote2 = () => { )} >

        - What if I don’t want Helicone to be in my critical path.{" "} + What if I don't want Helicone to be in my critical path?{" "}

        {isQuestionOpen ? ( @@ -48,7 +48,7 @@ const Quote2 = () => { )} >
        -

        +

        There are two ways to interface with Helicone - Proxy and Async. You can integrate with Helicone using the async integration to ensure zero propagation delay, or choose proxy for the simplest diff --git a/bifrost/components/home/Quote3.tsx b/bifrost/components/home/Quote3.tsx index 6554a8780f..b97a8c1d4c 100644 --- a/bifrost/components/home/Quote3.tsx +++ b/bifrost/components/home/Quote3.tsx @@ -6,28 +6,30 @@ const Quote3 = () => {

        -

        +

        {" "} Thank you for an{" "} excellent observability platform! {" "} - . I pretty much use it for all my AI apps now. + I pretty much use it for all my AI apps now.

        -
        - qawolf -
        +
        + Hassan El Mghari +
        Hassan El Mghari -
        -

        - Hassan El Mghari -

        -

        Devrel Lead

        -
        +

        + Hassan El Mghari +

        +

        DevRel Lead

        diff --git a/bifrost/components/home/Stats.tsx b/bifrost/components/home/Stats.tsx index c94f117083..59e2847894 100644 --- a/bifrost/components/home/Stats.tsx +++ b/bifrost/components/home/Stats.tsx @@ -62,7 +62,7 @@ const Stats = ({ diff --git a/bifrost/components/templates/landing/integrations.tsx b/bifrost/components/templates/landing/integrations.tsx index 3646f062cc..9a4879193e 100644 --- a/bifrost/components/templates/landing/integrations.tsx +++ b/bifrost/components/templates/landing/integrations.tsx @@ -46,7 +46,7 @@ const Integrations = (props: IntegrationsProps) => { ), href: "https://docs.helicone.ai/integrations/openai/javascript#openai-javascript-sdk-integration", integrations: { - "node.js": { + javascript: { language: "tsx", code: `import OpenAI from "openai"; @@ -95,31 +95,23 @@ client = OpenAI( ), href: "https://docs.helicone.ai/integrations/anthropic/javascript", integrations: { - "node.js": { + javascript: { language: "tsx", code: `import Anthropic from "@anthropic-ai/sdk"; const anthropic = new Anthropic({ - baseURL: "https://anthropic.helicone.ai/", - apiKey: process.env.ANTHROPIC_API_KEY, - defaultHeaders: { - "Helicone-Auth": , - }, -}); -`, + apiKey: ANTHROPIC_API_KEY, + baseURL: "https://anthropic.helicone.ai/\$\{HELICONE_API_KEY\}/\", +});`, }, python: { language: "python", code: `import anthropic client = anthropic.Anthropic( - api_key=os.environ.get("ANTHROPIC_API_KEY"), - base_url="https://anthropic.helicone.ai" - defaultHeaders={ - "Helicone-Auth": , - }, -) -`, + api_key=ANTHROPIC_API_KEY, + base_url="https://anthropic.helicone.ai/{HELICONE_API_KEY}/" +)`, }, langchain: { language: "python", @@ -127,13 +119,9 @@ client = anthropic.Anthropic( modelName: "claude-2", anthropicApiKey: "ANTHROPIC_API_KEY", clientOptions: { - baseURL: "https://anthropic.helicone.ai/", - defaultHeaders: { - "Helicone-Auth": Bearer , - }, + baseURL: "https://anthropic.helicone.ai/{HELICONE_API_KEY}/", }, -}); -`, +});`, }, }, }, @@ -151,7 +139,7 @@ client = anthropic.Anthropic( ), href: "https://docs.helicone.ai/integrations/azure/javascript", integrations: { - "node.js": { + javascript: { language: "tsx", code: `import OpenAI from "openai"; @@ -270,7 +258,7 @@ self.model = AzureChatOpenAI(
        ), integrations: { - "node.js": { + javascript: { language: "tsx", code: `fetch("https://openrouter.helicone.ai/api/v1/chat/completions", { method: "POST", @@ -317,7 +305,7 @@ self.model = AzureChatOpenAI( const [currentProvider, setCurrentProvider] = useState("OpenAI"); - const [currentIntegration, setCurrentIntregration] = useState("node.js"); + const [currentIntegration, setCurrentIntregration] = useState("javascript"); const selectedProvider = PROVIDERS.find( (provider) => provider.name === currentProvider @@ -327,17 +315,18 @@ self.model = AzureChatOpenAI( return (
        -
        -
        -

        +
        +
        + {/*

        */} +

        Get integrated in seconds

        -

        +

        Use any model and monitor applications at any scale.{" "}

        -
        -
        +
        +
        {PROVIDERS.map((provider) => (
        - Other providers? See docs + Other providers? See docs
        diff --git a/bifrost/components/ui/button.tsx b/bifrost/components/ui/button.tsx index dec0103bf3..eeb5ed7938 100644 --- a/bifrost/components/ui/button.tsx +++ b/bifrost/components/ui/button.tsx @@ -19,6 +19,7 @@ const buttonVariants = cva( "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", + fake_button: "", }, size: { default: "h-9 px-4 py-2", diff --git a/bifrost/public/static/home/evaluate.tsx b/bifrost/public/static/home/evaluate.tsx index 541e1e2aab..adb7dca69a 100644 --- a/bifrost/public/static/home/evaluate.tsx +++ b/bifrost/public/static/home/evaluate.tsx @@ -1,742 +1,771 @@ -const EvaluateSVG = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { + const [width, setWidth] = useState("100%"); + + useEffect(() => { + if (typeof window != "undefined") { + setWidth(window.innerWidth < 640 ? "100vw" : "100%"); + } + + const handleResize = () => { + if (typeof window != "undefined") { + setWidth(window.innerWidth < 640 ? "100vw" : "100%"); + } + }; + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + return ( + + - - - - - - - - - - - - - - - - - - - - - - { - if (!el) return; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + if (!el) return; - // Only set up the observer once - const observer = new IntersectionObserver( - ([entry]) => { - if (entry.isIntersecting) { - // Force reflow - void el.getBoundingClientRect(); + // Only set up the observer once + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + // Force reflow + void el.getBoundingClientRect(); - // Add animation with a delayeset first - setTimeout(() => { - el.style.animation = "drawLine 2s ease-out forwards"; - }, 1000); - } else { - el.style.animation = "none"; - } - }, - { threshold: 0.1 } - ); + // Add animation with a delayeset first + setTimeout(() => { + el.style.animation = "drawLine 2s ease-out forwards"; + }, 1000); + } else { + el.style.animation = "none"; + } + }, + { threshold: 0.1 } + ); - // Start observing - observer.observe(el); - }} - d="M217.281 478.679C252.987 458.723 258.302 437.817 294.168 436.297C327.434 434.888 338.554 462.097 371.412 466.68C401.322 470.851 420.175 469.675 448.775 461.223C484.083 450.789 496.954 422.565 524.829 412.223C559.403 399.395 565.285 397.632 601.716 389.18" - stroke="url(#paint0_linear_3306_14763)" - strokeWidth="2" - style={{ - strokeDasharray: 1000, - strokeDashoffset: 1000, - }} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + // Start observing + observer.observe(el); + }} + d="M217.281 478.679C252.987 458.723 258.302 437.817 294.168 436.297C327.434 434.888 338.554 462.097 371.412 466.68C401.322 470.851 420.175 469.675 448.775 461.223C484.083 450.789 496.954 422.565 524.829 412.223C559.403 399.395 565.285 397.632 601.716 389.18" + stroke="url(#paint0_linear_3306_14763)" + strokeWidth="2" + style={{ + strokeDasharray: 1000, + strokeDashoffset: 1000, + }} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; export default EvaluateSVG; diff --git a/bifrost/tailwind.config.ts b/bifrost/tailwind.config.ts index 5c677b4764..8f69e7c066 100644 --- a/bifrost/tailwind.config.ts +++ b/bifrost/tailwind.config.ts @@ -9,6 +9,9 @@ const config: Config = { ], theme: { extend: { + screens: { + lgxl: '1362px' + }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic":