Skip to content

Commit

Permalink
optimizing website performance for images and seo (#70)
Browse files Browse the repository at this point in the history 
* testing script to convert to webp

* reverting changes while testing

* duplicating images to webp format

* deleting a temporary file

* updating SEO tags
  • Loading branch information
@antopiahk
antopiahk authored Mar 3, 2024
1 parent 2685c45 commit 83bc033
Show file tree
Hide file tree
Showing 25 changed files with 100 additions and 66 deletions.
10 changes: 5 additions & 5 deletions apps/web/src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>Aitino</title>
<meta
name="description"
content="The world's leading web platform in pairing modern AI models with highly effective multi-agent technologies. By taking the form of node-editors, Aitino harnesses the ability to create teams of AI agents that collaborate to solve complex tasks in real-time."
content="Create a Crew of AI Agents with Aitino - The world's leading web platform in pairing modern AI Agents with communication abililities. By taking the form of node-editors, Aitino harnesses the ability to create teams of AI agents that collaborate to solve complex tasks in real-time."
/>
<link rel="icon" href="%sveltekit.assets%/favicon.png" sizes="any" />
<link rel="icon" href="%sveltekit.assets%/logo/logo.svg" type="image/svg+xml" />
Expand All @@ -17,14 +17,14 @@
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-NL88SKDC");
})(window, document, 'script', 'dataLayer', 'GTM-NL88SKDC');
</script>
<!-- End Google Tag Manager -->
</head>
Expand Down
123 changes: 62 additions & 61 deletions apps/web/src/routes/(marketing)/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
<script lang="ts">
import { SplitTest } from "svelte-split-testing";
import { Toaster } from "$lib/components/ui/sonner";
import FormItem from "$lib/components/FormItem.svelte";
import type { ActionData, PageData } from "./$types";
import SEO from "$lib/components/SEO/index.svelte";
import { Logo } from "$lib/components/ui/logo";
import * as Tabs from "$lib/components/ui/tabs";
import * as Card from "$lib/components/ui/card";
import { Button } from "$lib/components/ui/button";
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
import PricingTiers from "$lib/components/pricing/PricingTiers.svelte";
import { faqList as faqs } from "$lib/faq-data";
import { fade } from "svelte/transition";
import { Codesandbox, Gauge, HeartHandshake, Key, Settings2, Waves } from "lucide-svelte";
import { SplitTest } from 'svelte-split-testing';
import { Toaster } from '$lib/components/ui/sonner';
import FormItem from '$lib/components/FormItem.svelte';
import type { ActionData, PageData } from './$types';
import SEO from '$lib/components/SEO/index.svelte';
import { Logo } from '$lib/components/ui/logo';
import * as Tabs from '$lib/components/ui/tabs';
import * as Card from '$lib/components/ui/card';
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import PricingTiers from '$lib/components/pricing/PricingTiers.svelte';
import { faqList as faqs } from '$lib/faq-data';
import { fade } from 'svelte/transition';
import { Codesandbox, Gauge, HeartHandshake, Key, Settings2, Waves } from 'lucide-svelte';
export let form: ActionData;
export let data: PageData;
const titleVariants = {
"0": 'Join the Future of AI<br /> with Exclusive Early Access to <span class="bg-gradient-to-b from-primary to-background from-50% bg-clip-text text-transparent">Aitino</span>'
'0': 'Join the Future of AI<br /> with Exclusive Early Access to <span class="bg-gradient-to-b from-primary to-background from-50% bg-clip-text text-transparent">Aitino</span>'
// '1': 'Create Solutions Like <br /> Never Before with <span class="bg-gradient-to-r from-primary to-danger bg-clip-text text-transparent">Aitino</span>',
// '2': 'Automate Your Business <br /> with <span class="bg-gradient-to-r from-primary to-danger bg-clip-text text-transparent">Aitino</span>',
// '3': 'Create teams of AI Agents <br/> to solve any task.',
Expand All @@ -30,73 +30,73 @@
};
const subtitleVariants: Record<string, string> = {
"0": "Aitino is a platform that allows for the creation of teams of AI Agents to help you automate tasks and solve complex problems. It's made easily customizable through a node-editor."
'0': "Aitino is a platform that allows for the creation of teams of AI Agents to help you automate tasks and solve complex problems. It's made easily customizable through a node-editor."
};
let selectedIndex: number = 0;
const features = [
{
title: "Teams of AI Agents",
title: 'Teams of AI Agents',
description:
"Harness the collective intelligence of AI teams designed to collaborate and amplify problem-solving capabilities. Experience the synergy of multiple AI agents working in concert to tackle complex tasks efficiently.",
image: "/screenshots/crew_1_no_user_prompt.png"
'Harness the collective intelligence of AI teams designed to collaborate and amplify problem-solving capabilities. Experience the synergy of multiple AI agents working in concert to tackle complex tasks efficiently.',
image: '/screenshots/crew_1_no_user_prompt.png'
},
{
title: "Fully Custom Agents",
title: 'Fully Custom Agents',
description:
"Tailor your AI agents to meet your unique needs with fully customizable solutions. Create agents that align perfectly with your workflow and specific challenges.",
image: "/screenshots/agent_node_horizontal_1.png"
'Tailor your AI agents to meet your unique needs with fully customizable solutions. Create agents that align perfectly with your workflow and specific challenges.',
image: '/screenshots/agent_node_horizontal_1.png'
},
{
title: "Community Libraries",
title: 'Community Libraries',
description:
"Tap into tons of assets from community-driven libraries, where shared insights fuel innovation. Benefit from a repository of resources that grows smarter through collective contributions.",
image: ""
'Tap into tons of assets from community-driven libraries, where shared insights fuel innovation. Benefit from a repository of resources that grows smarter through collective contributions.',
image: ''
},
{
title: "Multi-modal Task Solving",
title: 'Multi-modal Task Solving',
description:
"Address a diverse range of problems with AI agents capable of multi-modal task solving. Whether it's text, image, or data-centric challenges, our versatile agents adapt to deliver results.",
image: ""
image: ''
}
];
const benefits = [
{
title: "Complex Problem Solving",
title: 'Complex Problem Solving',
description:
"Navigate through intricate challenges with AI Crews, designed for high-level task solving through collaboration, broadening the horizon of what's achievable.",
icon: Key
},
{
title: "Rapid Prototyping",
title: 'Rapid Prototyping',
description:
"Accelerate the development of innovative ideas with Aitino, enabling users to quickly prototype solutions through AI-driven analyses and agent collaboration.",
'Accelerate the development of innovative ideas with Aitino, enabling users to quickly prototype solutions through AI-driven analyses and agent collaboration.',
icon: Gauge
},
{
title: "Streamlined Operations",
title: 'Streamlined Operations',
description:
"Automate complex workflows with ease, reducing manual effort and increasing productivity.",
'Automate complex workflows with ease, reducing manual effort and increasing productivity.',
icon: Waves
},
{
title: "Enhanced Creativity",
title: 'Enhanced Creativity',
description:
"Unlock new potentials in content creation, powered by AI's versatility in handling diverse tasks and data types.",
icon: Codesandbox
},
{
title: "Community Support",
title: 'Community Support',
description:
"Benefit from collective intelligence by leveraging the hours of work of other users through shared assets.",
'Benefit from collective intelligence by leveraging the hours of work of other users through shared assets.',
icon: HeartHandshake
},
{
title: "Customization at Core",
title: 'Customization at Core',
description:
"Tailor every aspect of your AI agents to fit exact business needs, ensuring maximum effectiveness and integration.",
'Tailor every aspect of your AI agents to fit exact business needs, ensuring maximum effectiveness and integration.',
icon: Settings2
}
];
Expand All @@ -111,21 +111,22 @@
<svelte:head>
<script type="text/javascript">
window.$crisp = [];
window.CRISP_WEBSITE_ID = "d8b6e215-1bae-470a-b3c4-0e227902e47a";
window.CRISP_WEBSITE_ID = 'd8b6e215-1bae-470a-b3c4-0e227902e47a';
(function () {
d = document;
s = d.createElement("script");
s.src = "https://client.crisp.chat/l.js";
s = d.createElement('script');
s.src = 'https://client.crisp.chat/l.js';
s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s);
rel = 'preconnect';
d.getElementsByTagName('head')[0].appendChild(s);
})();
</script>
</svelte:head>

<SEO
slug="early-access"
title="Aitino Early Access"
metadescription="The world's leading web platform in pairing modern AI models with highly effective multi-agent technologies. By taking the form of node-editors, Aitino harnesses the ability to create teams of AI agents that collaborate to solve complex tasks in real-time."
title="Aitino - Create AI Crews"
metadescription="Create a Crew of AI Agents with Aitino - The world's leading web platform in pairing modern AI Agents with communication abililities. By taking the form of node-editors, Aitino harnesses the ability to create teams of AI agents that collaborate to solve complex tasks in real-time."
/>
<main class="relative overflow-hidden">
<div
Expand All @@ -134,7 +135,7 @@
<section class="relative flex h-screen w-screen flex-col justify-center">
<div class="flex w-screen flex-col justify-evenly py-6 md:mt-24 lg:mt-28 xl:mt-32">
<div
class="mx-auto flex w-full flex-col place-items-center gap-y-4 px-2 text-foreground sm:gap-y-8"
class="text-foreground mx-auto flex w-full flex-col place-items-center gap-y-4 px-2 sm:gap-y-8"
>
<Logo height="h-16" class="hidden rounded-xl lg:flex" />
<h1
Expand All @@ -146,7 +147,7 @@
</h1>

<h3
class="m-0 mx-auto mt-2 max-w-3xl text-balance text-center text-sm text-foreground brightness-75 sm:m-0 sm:text-lg md:text-lg lg:text-xl xl:text-2xl"
class="text-foreground m-0 mx-auto mt-2 max-w-3xl text-balance text-center text-sm brightness-75 sm:m-0 sm:text-lg md:text-lg lg:text-xl xl:text-2xl"
>
<SplitTest key="Subtitle Test" variants={Object.keys(subtitleVariants)} let:variant>
{@html subtitleVariants[variant]}
Expand All @@ -165,10 +166,10 @@
>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mb-8 max-w-2xl md:mx-auto md:text-center xl:max-w-none">
<h2 class="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl">
<h2 class="text-foreground text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">
Become a more efficient entrepreneur
</h2>
<p class="mt-6 text-lg tracking-tight text-foreground/80">
<p class="text-foreground/80 mt-6 text-lg tracking-tight">
Here's a list of Aitino's features that will save you time and money.
</p>
</div>
Expand All @@ -189,8 +190,8 @@
</Card.Description>
</Card.Header>
<Card.Content class="space-y-2">
<div class="mx-auto w-full max-w-3xl rounded-xl border border-border">
{#if feature.image != ""}
<div class="border-border mx-auto w-full max-w-3xl rounded-xl border">
{#if feature.image != ''}
<img
class="w-full rounded-xl object-cover"
src={feature.image}
Expand All @@ -199,7 +200,7 @@
{:else}
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
<h2
class="text-center text-3xl font-semibold uppercase tracking-tight text-accent sm:text-4xl md:text-5xl"
class="text-accent text-center text-3xl font-semibold uppercase tracking-tight sm:text-4xl md:text-5xl"
>
Coming Soon
</h2>
Expand All @@ -217,7 +218,7 @@
<section class=" py-24 sm:py-32" id="benefits-section">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl sm:text-center">
<h2 class="text-base font-semibold leading-7 text-primary">Everything you need</h2>
<h2 class="text-primary text-base font-semibold leading-7">Everything you need</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">
Not VC backed? Not a problem.
</p>
Expand All @@ -237,19 +238,19 @@
/>
<div class="relative" aria-hidden="true">
<div
class="absolute -inset-x-1 bottom-0 bg-gradient-to-t from-primary-900/20 pt-[7%]"
class="from-primary-900/20 absolute -inset-x-1 bottom-0 bg-gradient-to-t pt-[7%]"
></div>
</div>
</div>
</div>
<div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
<dl
class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-foreground/75 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16"
class="text-foreground/75 mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16"
>
{#each benefits as { title, description, icon }}
<div class="relative pl-9">
<dt class="inline font-semibold text-foreground">
<svelte:component this={icon} class="absolute left-1 top-1 h-5 w-5 text-primary" />
<dt class="text-foreground inline font-semibold">
<svelte:component this={icon} class="text-primary absolute left-1 top-1 h-5 w-5" />
{title}.
</dt>
<dd class="inline">
Expand All @@ -276,13 +277,13 @@

<section>
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
<h2 class="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl">
<h2 class="text-foreground text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">
Frequently asked questions
</h2>
<p class="mt-6 max-w-2xl text-base leading-7 text-foreground/75">
<p class="text-foreground/75 mt-6 max-w-2xl text-base leading-7">
Have a different question and can’t find the answer you’re looking for? Reach out to us by <a
href="mailto:[email protected]"
class="font-semibold text-accent hover:text-accent-700">sending us an email</a
class="text-accent hover:text-accent-700 font-semibold">sending us an email</a
> and we’ll get back to you as soon as we can.
</p>
<div class="mt-20">
Expand All @@ -291,10 +292,10 @@
>
{#each faqs as { question, answer }}
<div>
<dt class="text-balance text-lg font-semibold text-foreground">
<dt class="text-foreground text-balance text-lg font-semibold">
{question}
</dt>
<dd class="leading- mt-2 text-pretty text-sm text-foreground/75">
<dd class="leading- text-foreground/75 mt-2 text-pretty text-sm">
{@html answer}
</dd>
</div>
Expand Down
Binary file added apps/web/static/artwork/plane.webp
View file
Binary file not shown.
Binary file added apps/web/static/artwork/plane_horizontal.webp
View file
Binary file not shown.
Binary file added apps/web/static/artwork/rocket.webp
View file
Binary file not shown.
Binary file added apps/web/static/artwork/sailboat.webp
View file
Binary file not shown.
Binary file added apps/web/static/blog/low_res_n_00014_.webp
View file
Binary file not shown.
Binary file added apps/web/static/favicon.webp
View file
Binary file not shown.
Binary file added apps/web/static/logo/logo.webp
View file
Binary file not shown.
Binary file added apps/web/static/logo/logo_nobg.webp
View file
Binary file not shown.
Binary file added apps/web/static/logo/logo_nobg_nopadding.webp
View file
Binary file not shown.
Binary file added apps/web/static/logo/logo_nopadding.webp
View file
Binary file not shown.
Binary file added apps/web/static/logo/logo_rounded.webp
View file
Binary file not shown.
Binary file added apps/web/static/logo/logo_rounded_200px.webp
View file
Binary file not shown.
Binary file added apps/web/static/logo/logo_rounded_64px.webp
View file
Binary file not shown.
Binary file added apps/web/static/people/jonas-lindberg.webp
View file
Binary file not shown.
Binary file added apps/web/static/people/jorge-lewis.webp
View file
Binary file not shown.
Binary file added apps/web/static/screenshots/agent_node.webp
View file
Binary file not shown.
Binary file added apps/web/static/screenshots/agent_node_horizontal_1.webp
View file
Binary file not shown.
Binary file added apps/web/static/screenshots/agent_node_horizontal_2.webp
View file
Binary file not shown.
Binary file added apps/web/static/screenshots/crew_1.webp
View file
Binary file not shown.
Binary file added apps/web/static/screenshots/crew_1_no_user_prompt.webp
View file
Binary file not shown.
Binary file added apps/web/static/screenshots/crew_agents.webp
View file
Binary file not shown.
Binary file added apps/web/static/screenshots/crew_editor_1.webp
View file
Binary file not shown.
33 changes: 33 additions & 0 deletions apps/web/static/utils/duplicate_to_webp.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import os
import glob
from PIL import Image
import re

def convert_to_webp(directory):
# Find all image files in the given directory and its subdirectories
for image_file in glob.glob(directory + '/**', recursive=True):
if image_file.lower().endswith(('.png', '.jpg', '.jpeg')):
# Open the image file, convert it to webp, and save it
Image.open(image_file).save(image_file.rsplit('.', 1)[0] + '.webp')

if image_file.lower().endswith(('.png', '.jpg', '.jpeg')):
# Open the image file, convert it to webp, and save it
Image.open(image_file).save(image_file.rsplit('.', 1)[0] + '.webp')

def replace_in_code(directory):
# Find all code files in the given directory and its subdirectories
for code_file in glob.glob(directory + '/**', recursive=True):
if code_file.endswith(('.svelte', '.ts', '.html', '.js')):
# Open the code file, read its contents
with open(code_file, 'r') as file:
contents = file.read()
print("Replacing in: ", code_file, "... \n")
# Replace all occurrences of the image file names with the .webp extension
contents = re.sub(r'(\.png|\.jpg|\.jpeg)', '.webp', contents, flags=re.IGNORECASE)
# Write the modified contents back to the file
with open(code_file, 'w') as file:
file.write(contents)

# Call the functions with the desired directory paths
convert_to_webp('./apps/web/static')
replace_in_code('./apps/web/static')

0 comments on commit 83bc033

Please sign in to comment.