Skip to content
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

Website update with download button and updates to text #66

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Website update with download button and updates to text #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00e885f
Landing page update
katetaylormoz Mar 13, 2024
bb30501
removing -min suffix
katetaylormoz Mar 13, 2024
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
83 changes: 83 additions & 0 deletions LandingPageUpdate-WorkingBuild/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<div class="content">
<img class="logo" src="logo.png" alt="MemoryCache Logo">
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</header>

<main">
<section class="hero">
<!-- <h1 class="heading-1">MemoryCache</h1> -->
<h1 class="heading-1">MemoryCache is an experimental development project to turn a local desktop environment into a personal on-device AI agent.</h1>
<button class="primary-button">Download MemoryCache</button>
</section>

<div class="banner-bar">

<section>
<h2 class="heading-2">What's included?</h2>
</section>
<section class="features">
<article>
<h3 class="heading-3">Locally-hosted privateGPT instance</h3>
</article>
<article>
<h3 class="heading-3">Browser-based interface for working with your insights</h3>
</article>
<article>
<h3 class="heading-3">Firefox extension for adding to your cache from the browser</h3>
</article>
<article>
<h3 class="heading-3">Llamafile LLM options for finding the right model for your usecase</h3>
</article>
</section>


</div>


<section class="faq">
<h2 class="heading-2">Frequently Asked Questions</h2>

<div class="accordion">
<button class="accordion-button heading-3">Q: Does MemoryCache send my data anywhere?</button>
<div class="accordion-content">
<p>No. One of the core principles of MemoryCache is that you have full control over the system, and that it all stays on your device. If you’re a developer or someone who just likes to tinker with your computer applications, and you want to cloud-ify this, feel free! But we’re looking to stay entirely local. The software will form a link with folders that you point to on your computer and will utilize the contents to generate new forms of text intended to augment your existing workflows</p>
</div>
</div>
<div class="accordion">
<button class="accordion-button heading-3">Q: How does MemoryCache work?</button>
<div class="accordion-content">
<p>Install the MemoryCache application on your computer. Run the program to start the locally-run server which will also load an interface in your browser to interact with your cache and personal AI agent. Create a new project and point to a folder (or multiple folders) on your computer for the AI to access. A process called ‘ingestion’ will make those files available to the AI to provide answers to queries and surface generated insights based on what you provide to the software</p>
</div>
</div>
<div class="accordion">
<button class="accordion-button heading-3">Q: Is this a Firefox project?</button>
<div class="accordion-content">
<p>No. MemoryCache is a hackathon-style project by the Mozilla Innovation Ecosystem team, not a Firefox project. While the project uses a Firefox extension as a way of collecting information, this is a set of scripts and tools to augment privateGPT, a native AI application. It’s meant to streamline the process of saving information that you might read in the browser to store it in your own personal library of information.</p>
</div>
</div>
</section>
</main>

<footer>
</footer>
<script src="script.js"></script>
</body>
</html>
Binary file added LandingPageUpdate-WorkingBuild/logo.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.
22 changes: 22 additions & 0 deletions LandingPageUpdate-WorkingBuild/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
document.addEventListener('DOMContentLoaded', function () {
var accordionButtons = document.querySelectorAll('.accordion-button');

accordionButtons.forEach(function(button) {
button.addEventListener('click', function() {
// This line optionally allows for closing all other accordions when one is opened.
const currentlyActiveAccordionButton = document.querySelector('.accordion-button.active');
if(currentlyActiveAccordionButton && currentlyActiveAccordionButton !== button) {
currentlyActiveAccordionButton.classList.toggle('active');
currentlyActiveAccordionButton.nextElementSibling.style.maxHeight = null;
}

button.classList.toggle('active');
var accordionContent = button.nextElementSibling;
if (accordionContent.style.maxHeight) {
accordionContent.style.maxHeight = null;
} else {
accordionContent.style.maxHeight = accordionContent.scrollHeight + 30 + "px";
}
});
});
});
129 changes: 129 additions & 0 deletions LandingPageUpdate-WorkingBuild/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600&display=swap");
html, body {
font-family: 'Work Sans', sans-serif;
background: linear-gradient(90deg, #FFB3BB 0%, #FFDFBA 26.56%, #FFFFBA 50.52%, #87EBDA 76.04%, #BAE1FF 100%);
padding: 0;
margin: 0; }

section {
max-width: 800px;
margin: auto; }

header {
margin: 24 0; }
header .content {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 1000px;
margin: auto; }
header .content .logo {
width: 170px;
height: 33px;
margin: auto 0; }
header .content nav ul {
display: flex;
list-style-type: none; }
header .content nav ul li a {
margin: 12px;
text-decoration: none;
color: #2d3d46;
font-size: 16px;
font-weight: 400;
line-height: 24px; }

.hero {
padding: 40px; }

.features {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }

.features article {
max-width: 360px; }

p {
font-size: 1em;
line-height: 150%; }

.heading-1 {
color: #2d3d46;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@katetaylormoz I have not used these my self because I usually have SCSS laying around but might be nice here in the vanilla CSS work flow?

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah, haha
I actually used a compiler called CodeKit to get to this build of css/html exports -- I didn't add the source files to this repo because it wasn't necessary for the scaling of the blog site for now. It was just easier to implement what I wanted to do this way without worrying about the environment too much for the development workflow

This is not ideal for production environments, but it was the quickest way to get a polished simple layout

font-size: 1.4em;
line-height: 150%;
font-weight: 400; }

.heading-2 {
color: #2d3d46;
font-size: .8em;
line-height: 150%;
font-weight: 400; }

.heading-3 {
color: #2d3d46;
font-size: 1em;
line-height: 150%;
font-weight: 400; }

button {
font-family: 'Work Sans', sans-serif; }

.banner-bar {
width: 100%;
height: 100%;
background: #FFFFFF4D;
padding: 16px 0;
margin: 40px 0; }

.primary-button {
color: #180AB8;
background-color: #FFFFFF6D;
font-size: 1em;
font-weight: 500;
line-height: 24px;
padding: 16px 24px;
background: #FFFFFF;
border: none;
transition: background-color 0.2s ease;
border-radius: 8px; }

.primary-button:hover {
background-color: #FFFFFF8D;
cursor: pointer; }

.accordion-content {
max-height: 0;
padding: 0 12px;
overflow: hidden;
transition: max-height 0.2s ease;
border: 0px;
border-top: none;
margin-bottom: 12px; }

.accordion-button {
background-color: #FFFFFF2D;
color: #2d3d46;
border: none;
cursor: pointer;
padding: 12px;
width: 100%;
text-align: left;
outline: none;
transition: background-color 0.2s ease;
font-size: 1em;
border-radius: 8px; }

.accordion-button:hover {
background-color: #FFFFFF6D; }

.accordion-button:after {
content: '\002B';
/* Unicode character for "plus" sign (+) */
color: #777;
float: right;
margin-left: 5px; }

.accordion-button.active:after {
content: "\2212";
/* Unicode character for "minus" sign (−) */ }
2 changes: 1 addition & 1 deletion docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@
{%- include footer.html -%}

</body>

<script src="assets/script.js"></script>
</html>
62 changes: 48 additions & 14 deletions docs/_layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,57 @@ <h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}

{{ content }}
<div class="introduction">
<h2 class="callout-left">MemoryCache is an experimental development project to turn a local desktop environment into an on-device AI agent.</h2>
</div>
<main>
<section class="hero">
<!-- <h1 class="heading-1">MemoryCache</h1> -->
<h1 class="heading-1">MemoryCache is an experimental development project to turn a local desktop environment into a personal on-device AI agent.</h1>
<button class="primary-button">Download MemoryCache</button>
</section>

<div class="detailed-overview">
<p> Every human is unique. The original vision of the personal computer was as a companion tool for creating intelligence, and the internet was born as a way to connect people and data together around the world. Today, artificial intelligence is upending the way that we interact with data and information, but control of these systems is most often provided through an API endpoint, run in the cloud, and abstracting away deep personal agency in favor of productivity. </p>
<div class="banner-bar">
<section>
<h2 class="heading-2">What's included?</h2>
</section>
<section class="features">
<article>
<h3 class="heading-3">Locally-hosted privateGPT instance</h3>
</article>
<article>
<h3 class="heading-3">Browser-based interface for working with your insights</h3>
</article>
<article>
<h3 class="heading-3">Firefox extension for adding to your cache from the browser</h3>
</article>
<article>
<h3 class="heading-3">Llamafile LLM options for finding the right model for your usecase</h3>
</article>
</section>
</div>

<p> MemoryCache, <a href="https://future.mozilla.org" target="_blank"> a Mozilla Innovation Project,</a> is an experimental AI Firefox add-on that partners with privateGPT to quickly save your browser history to your local machine and have a local AI model ingest these - and any other local files you give it - to augment responses to a chat interface that comes built-in with privateGPT. We have an ambition to use MemoryCache to move beyond the chat interface, and find a way to utilize idle compute time to generate net new insights that reflect what you've actually read and learned - not the entirety of the internet at scale. </p>
<figure>
<img src ="/../assets/images/DesktopApplication.png" />
<figcaption> Design mockup of a future interface idea for MemoryCache</figcaption>
</figure>
<p> We're not breaking ground on AI innovation (in fact, we're using an old, "deprecated" file format from a whole six months ago), by design. MemoryCache is a project that allows us to sow some seeds of exploration into creating a deeply personalized AI experience that returns to the original vision of the computer as a companion for our own thought. With MemoryCache, weirdness and unpredictability is part of the charm. </p>

<p> We're a small team working on MemoryCache as a part-time project within Mozilla's innovation group, looking at ways that our personal data and files are used to form insights and new neural connections for our own creative purpose. We're working in the open not because we have answers, but because we want to contribute our way of thinking to one another in a way where others can join in. </p>
</div>
<section class="faq">
<h2 class="heading-2">Frequently Asked Questions</h2>

<div class="accordion">
<button class="accordion-button heading-3">Q: Does MemoryCache send my data anywhere?</button>
<div class="accordion-content">
<p>No. One of the core principles of MemoryCache is that you have full control over the system, and that it all stays on your device. If you’re a developer or someone who just likes to tinker with your computer applications, and you want to cloud-ify this, feel free! But we’re looking to stay entirely local. The software will form a link with folders that you point to on your computer and will utilize the contents to generate new forms of text intended to augment your existing workflows</p>
</div>
</div>
<div class="accordion">
<button class="accordion-button heading-3">Q: How does MemoryCache work?</button>
<div class="accordion-content">
<p>Install the MemoryCache application on your computer. Run the program to start the locally-run server which will also load an interface in your browser to interact with your cache and personal AI agent. Create a new project and point to a folder (or multiple folders) on your computer for the AI to access. A process called ‘ingestion’ will make those files available to the AI to provide answers to queries and surface generated insights based on what you provide to the software</p>
</div>
</div>
<div class="accordion">
<button class="accordion-button heading-3">Q: Is this a Firefox project?</button>
<div class="accordion-content">
<p>No. MemoryCache is a hackathon-style project by the Mozilla Innovation Ecosystem team, not a Firefox project. While the project uses a Firefox extension as a way of collecting information, this is a set of scripts and tools to augment privateGPT, a native AI application. It’s meant to streamline the process of saving information that you might read in the browser to store it in your own personal library of information.</p>
</div>
</div>
</section>
</main>

{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Updates" }}</h2>
Expand All @@ -46,5 +81,4 @@ <h3>

<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
{%- endif -%}

</div>
Loading