Skip to content

landing page update #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cat-liu wants to merge 1 commit into
base: main
Choose a base branch
from
Open

landing page update #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/images/create_new_folder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/download.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/model_training.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/placeholder-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/widgets.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
163 changes: 50 additions & 113 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,126 +1,63 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Zeroshot</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #1a1a1a;
color: #f5f5f5;
padding: 20px;
line-height: 1.6;
}

h1 {
font-size: 3em;
}

.container {
width: 60%;
margin: auto;
text-align: left;
}

.center {
text-align: center;
}

.steps {
margin-top: 2em;
}

.step-box {
background-color: #2c2c2c;
padding: 20px;
border-radius: 5px;
margin-bottom: 2em;
}

.button {
background-color: #27ae60;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.button:hover {
background-color: #2ecc71;
}

a {
color: rgb(0, 98, 255);
}

a:visited {
color: rgb(0, 98, 255);
}

a.button:visited {
color: white;
}

img {
max-width: 100%;
}

.code-container {
background-color: #2c2c2c;
padding: 20px;
border-radius: 5px;
}

.code-container pre {
margin-top: 0;
margin-bottom: 0;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>zeroshot</title>
</head>
<body>
<div class="container">
<div class="center">
<h1>Zeroshot</h1>
<p>Like if GPT+Images had a baby brother. Check out our <a href="https://github.com/moonshinelabs-ai/zeroshot-python">Github</a>.</p>
</div>

<div class="steps">
<div class="step-box">
<h2>Step 1: Make image categories by describing them with text.</h2>
<div class="center">
<a href="https://usezeroshot.com" class="button">Create a Classifier in 60 Seconds</a>
<!-- <header>
code for menu nav will be here
</header> -->

<main>
<!-- landing page hero -->
<div class="hero-container">
<div class="hero-left">
<p class="hero-title">Harness the power of text to add computer vision to your app in minutes</p>
<p class="hero-subtext">Zeroshot is an open source tool for developers that creates image classifiers
from text descriptions</p>
<div class="hero-buttons">
<button class="try-button"> Try it out</button>
<button class="github-button">Github</button>
</div>
<p>See our <a href="https://github.com/moonshinelabs-ai/zeroshot-python/blob/main/docs/getting_started.md">getting started</a> page for more detailed instructions.</p>
</div>
</div>

<div class="step-box">
<h2>Step 2: Use our code to automatically categorize new images.</h2>
<div class="center">
<div class="code-container">
<pre><code class="language-python">
model = zeroshot.Classifier(
"your model key here"
)

result = model.predict(url_or_ndarray)
class_name = model.classes[result]
<!-- show examples of image classification with gif -->
<div class="gif-container">
<img src="images/placeholder-image.png" class="hero-gif" />
</div>

print(f'Prediction: "{class_name}"')
</code></pre>
</div>
</div>
<!-- how to section with setting up zeroshot -->
<!-- update with svg files later when have time -->
<div class="how-container">
<p class="how-to-title">How it works</p>
<div class="how-to-box">
<img src="images/model_training.png" class="how-to-icon" />
<p class="how-to-text">Train your model</p>
</div>
<div class="how-to-box">
<img src="images/download.png" class="how-to-icon" />
<p class="how-to-text">Install Zeroshot</p>
</div>
<div class="how-to-box">
<img src="images/create_new_folder.png" class="how-to-icon" />
<p class="how-to-text">Import Zeroshot</p>
</div>
<div class="how-to-box">
<img src="images/widgets.png" class="how-to-icon" />
<p class="how-to-text">Use with your custom model</p>
</div>
<div class="how-to-box">
<button class="trainmodel-button">Train your custom model ></button>
</div>
</div>
</div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js"></script>
<!-- <footer>
code for footer
</footer> -->
</body>
</html>
135 changes: 135 additions & 0 deletions docs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
@import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

* {
font-family: 'Open Sans', sans-serif;
color: white;
}

body {
background-color: black;
}

main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}

/* landing page hero */
.hero-container {
display: flex;
align-items: space-between;
max-width: 1160px;
padding-bottom: 80px;
text-align: center;
}

.hero-title {
font-size: 48px;
font-weight: 700;
max-width: 760px;
padding-bottom: 30px;
padding-top: 200px;
}

.hero-subtext {
font-family: 'Oxygen Mono', monospace;
font-size: 22px;
max-width: 760px;
padding-bottom: 30px;
line-height: 160%;
letter-spacing: 0.24px;
}

.hero-buttons {
display: flex;
justify-content: center;
margin: 30px;
}

.try-button,
.github-button,
.trainmodel-button {
display: inline-block;
height: 64px;
width: 208px;
font-family: 'Oxygen Mono', monospace;
font-size: 16px;
text-align: center;
cursor: pointer;
border: 1.5px solid;
border-radius: 8px;
margin: 20px;
}

.try-button {
background-color: black;
color: white;
}

.github-button {
background-color: black;
color: #00FF75;
border-color: #00FF75;
}

/* image classification gifs */
/* .gif-container {

} */

.hero-gif {
max-width: 100%;
height: auto;
display: block;
}


/* how to section */
.how-container {
background-color: #111111;
width: 1160px;
display: flex;
text-align: center;
flex-direction: column;
align-items: space-between;
padding: 30px 0px 30px 0px;
margin: 80px;
}

.how-to-title {
font-size: 36px;
font-weight: 700;
padding-bottom: 30px;
}

.how-to-box {
display: flex;
justify-content: start;
align-items: center;
padding-left: 35%;
padding-bottom: 30px;
}

.how-to-icon {
height: 50px;
width: 50px;
}

.how-to-text {
font-family: 'Oxygen Mono', monospace;
font-size: 20px;
margin-left: 20px;
}

.trainmodel-button {
background-color: #111111;
color: #00FF75;
border-color: #00FF75;
font-size: 12px;
width: 260px;
height: 60px;
}