Skip to content

Commit

Permalink
Gorilla Website Landing Page Overhaul Part 2 (#368)
Browse files Browse the repository at this point in the history 
This PR is the continuation of #359. It addresses some minor issues that
are not covered in that PR.
This PR **does not** change any BFCL leaderboard values.
  • Loading branch information
@HuanzhiMao
HuanzhiMao authored Apr 18, 2024
1 parent bdd9d0a commit e7627c3
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 152 deletions.
4 changes: 2 additions & 2 deletions assets/css/cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
overflow: hidden;
}

.card-shorter {
/* .card-shorter {
height: 35vh;
}
} */

@media (max-width: 768px) {
.card-container {
Expand Down
97 changes: 30 additions & 67 deletions assets/css/main_page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,6 @@ h6 {
border-color: white;
}

/* Footer Gradient Background */
.container:last-child {
background: white;
color: white;
}

img {
max-width: 100%;
max-height: 100%;
Expand All @@ -83,36 +77,32 @@ em {
color: black;
}


.api-appstore {
margin-bottom: 20px;
}

.spinner {
position: relative;
/* Change to relative for responsiveness */
overflow: hidden;
}

.spinner__text {
position: relative;
display: inline-block;
width: 50px;
/* Adjust the width as needed */
text-align: center;
}

.spinner__text--top,
.spinner__text--bottom {
display: inline-block;
animation: 1s ease 1.05s infinite running none;
animation: 1s ease 1s infinite;
}

.spinner__text--top {
animation-name: spinTop;
}

/* Bottom text spinner has to be configured so that it is positioned
right at the same position as the top one */
.spinner__text--bottom {
position: absolute;
top: 0;
Expand All @@ -121,6 +111,7 @@ right at the same position as the top one */
animation-name: spinBottom;
}


@keyframes spinTop {
from {
transform: translateY(0%);
Expand All @@ -144,65 +135,17 @@ right at the same position as the top one */
}

@media screen and (max-width: 768px) {
.spinner {
position: relative;
/* Change to relative for responsiveness */
overflow: hidden;
}

.spinner__text {
position: relative;
display: inline-block;
width: 50px;
/* Adjust the width as needed */
text-align: center;
}

.spinner__text--top,
.spinner__text--bottom {
display: inline-block;
animation: 1.5s ease 2s infinite running none;
}

.spinner__text--top {
animation-name: spinTop;
}

/* Bottom text spinner has to be configured so that it is positioned
right at the same position as the top one */
.spinner__text--bottom {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation-name: spinBottom;
}

@keyframes spinTop {
from {
transform: translateY(0%);
}

to {
transform: translateY(-100%);
}
.spinner-all-text-style {
font-size: 26px;
}

@keyframes spinBottom {
from {
opacity: 1;
transform: translateY(100%);
}

to {
opacity: 1;
transform: translateY(0%);
}
.spinner-container {
/* still keep as row */
flex-direction: row;
}

}



pre {
-webkit-overflow-scrolling: touch;
background-color: #f5f5f5;
Expand All @@ -226,4 +169,24 @@ pre {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: auto;
font-family: monospace;
}
}

.video-container {
min-height: 55vh;

}

.video-section-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
}

.video-section-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Binary file renamed assets/img/mag-16.png → assets/img/book-16.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file renamed assets/img/steam-16.png → assets/img/fire_engine-16.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 31 additions & 83 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,17 @@
.custom-cursor-gorilla {
cursor: url('assets/img/gorilla-16.png'), auto !important;
}

.custom-cursor-mag {
cursor: url('assets/img/mag-16.png'), auto !important;
cursor: url('assets/img/book-16.png'), auto !important;
}

.custom-cursor-trophy {
cursor: url('assets/img/trophy-16.png'), auto !important;
}

.custom-cursor-steam {
cursor: url('assets/img/steam-16.png'), auto !important;
cursor: url('assets/img/fire_engine-16.png'), auto !important;
}
</style>

Expand Down Expand Up @@ -83,20 +86,20 @@ <h6 class="text-center">[email protected], [email protected]</h6>
<div>
<p></p>
</div>
<div class="container" style="max-width: 768px; background: #e5effc;">
<div class="container spinner-container" style="max-width: 768px; background: #e5effc;">
<div>
<div class="col-md-12 api-appstore">
<h3>An API Appstore for LLMs</h3>
<h3 class="spinner-all-text-style">An API Appstore for LLMs</h3>
</div>

<div class="col-md-12">
<div class="spinner">
<h3>Gorilla Used at
<h3 class="spinner-all-text-style">Gorilla Used at
<div class="spinner__text">
<span class="spinner__text--top"
data-texts="Microsoft, Nvidia, Tesla, OpenAI, Linkedin, Netflix, MIT, Cisco, Weaviate, Anthropic, Cohere"></span>
data-texts="Microsoft, Nvidia, Tesla, OpenAI, Linkedin, Netflix, MIT, Cisco, Anthopic, Weaviate, Cohere"></span>
<span class="spinner__text--bottom"
data-texts="Microsoft, Nvidia, Tesla, OpenAI, Linkedin, Netflix, MIT, Cisco, Weaviate, Anthropic, Cohere"></span>
data-texts="Microsoft, Nvidia, Tesla, OpenAI, Linkedin, Netflix, MIT, Cisco, Anthopic, Weaviate, Cohere"></span>
</div>
</h3>
</div>
Expand Down Expand Up @@ -193,7 +196,7 @@ <h3>Gorilla Used at
</div>
<div class="row">
<div class="col-md-6">
<div class="card card-shorter custom-cursor-mag" style="background-color: antiquewhite;">
<div class="card custom-cursor-mag" style="background-color: antiquewhite;">
<div class="card-inner">
<div class="card-front">
<div class="card-title">RAFT</div>
Expand Down Expand Up @@ -232,7 +235,7 @@ <h3>Gorilla Used at
</div>
</div>
<div class="col-md-6">
<div class="card card-shorter custom-cursor-steam" style="background-color: #fefae0;">
<div class="card custom-cursor-steam" style="background-color: #fefae0;">
<div class="card-inner">
<div class="card-front">
<div class="card-title">GoEX</div>
Expand Down Expand Up @@ -284,6 +287,20 @@ <h3>Gorilla Used at
<h2>News</h2>
</div>
<div class="col-md-12">
<h5>🚒 <a href="https://goex.gorilla-llm.com/index">GoEx</a>: A Runtime for executing LLM generated
actions like code & API calls GoEx presents “undo”
and “damage confinement” abstractions for mitigating the risk of unintended actions taken in
LLM-powered systems. <a
href="https://gorilla.cs.berkeley.edu/blogs/10_gorilla_exec_engine.html">Release blog</a>, <a
href="https://arxiv.org/abs/2404.06921">Paper</a>.</h5>
<h5>🎉 <a href="https://gorilla.cs.berkeley.edu/leaderboard.html">Berkeley Function Calling
Leaderboard</a>! How do models stack up for function calling? 🎯 Read more in our <a
href="https://gorilla.cs.berkeley.edu/blogs/8_berkeley_function_calling_leaderboard.html">Release
Blog</a>.
</h5>
<h5>🏆 <a href="https://gorilla.cs.berkeley.edu/blogs/7_open_functions_v2.html">Gorilla OpenFunctions
v2</a> Sets new SoTA for open-source LLMs 💪 On-par with GPT-4 🙌 Supports more
languages 👌</h5>
<h5> 🥇 <a href="blogs/4_open_functions.html">Gorilla OpenFunctions!</a> Drop in replacement! <a
href="https://colab.research.google.com/drive/16M5J2H9F8YQora_W2PDnp120slZH-Mqd?usp=sharing">Examples</a>
</h5>
Expand All @@ -300,13 +317,13 @@ <h5> 📣 We are excited to hear your feedback and we welcome API contributions
</div>

<!-- Gorilla CLI and Spotlight -->
<div class="container">
<div class="container video-container">
<div class="row">
<div class="col-md-12 text-center">
<h2>Gorilla for your CLI and Spotlight Search</h2>
</div>
<div class="col-md-6">
<div class="col-md-12 text-center">
<div class="col-md-12 text-center video-section-container">
<iframe src="https://www.youtube.com/embed/4EdyWkcddPc" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
Expand All @@ -316,7 +333,7 @@ <h2>Gorilla for your CLI and Spotlight Search</h2>
Get started with <code>pip install gorilla-cli</code></p>
</div>
<div class="col-md-6">
<div class="col-md-12 text-center">
<div class="col-md-12 text-center video-section-container">
<iframe src="https://www.youtube.com/embed/RMgM3tPTpXI" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
Expand All @@ -335,7 +352,7 @@ <h2>Gorilla for your CLI and Spotlight Search</h2>
<div class="row">
<div class="col-md-12 text-center">
<h2>Vision</h2>
<img src="assets/img/blog_post_1_teaser.gif" style="width: 80%;margin-bottom: 8px;"
<img src="assets/img/blog_post_1_teaser.gif" style="width: 75%;margin-bottom: 8px;"
alt="Gorilla LLM logo">
</div>
<em class="col-md-12">Rather have the user at the center, Gorilla enables users to interact with a wide
Expand Down Expand Up @@ -373,78 +390,9 @@ <h2 class="text-center">Citation</h2>
</div>
</div>

<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");

function opentab(tabname) {
for (tablink of tablinks) {
tablink.classList.remove("active-link");
}
for (tabcontent of tabcontents) {
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>

var sidemenu = document.getElementById("sidemenu");

function openmenu() {
sidemenu.style.right = "0";
}
function closemenu() {
sidemenu.style.right = "-200px";
}

</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbxdAKyEA36HA_p0k3KwMzMigxgFCZ1XegRBPfjgxlNaOK2CsOnP9hrEV_6V1ARCAJw3vw/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById("msg")

form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
msg.innerHTML = "<span style='color: black;'>Message Sent Successfully!</span>";
setTimeout(function () {
msg.innerHTML = ""
}, 5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})

const spinnerTexts = document.querySelectorAll('[class^="spinner__text--"]')
const texts = spinnerTexts[0].dataset.texts.split(',')
const textPositions = [0, 1]
<script src="indexPage.js"></script>

function initializeSpinnerTexts() {
spinnerTexts.forEach((spinnerText, index) => {
// Initialize the spinner texts' text
spinnerText.innerText = texts[textPositions[index]]

// Change text after every animation iteration
spinnerText.addEventListener('animationiteration', e => {
e.target.innerText = texts[++textPositions[index] % texts.length]
})
})
}

window.onload = initializeSpinnerTexts
document.addEventListener('DOMContentLoaded', function () {
var cards = document.querySelectorAll('.card');

for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener('click', function () {
this.classList.toggle('card-flipped');
});
}
});
</script>

</body>

Expand Down
Loading

0 comments on commit e7627c3

Please sign in to comment.