Giter VIP home page Giter VIP logo

stampy-ui's Introduction

Stampy UI

Stampy!

Stampy UI is an interface for aisafety.info, a questions and answers site about AGI safety, built with Remix and Cloudflare Workers. When reading about existential risks becomes "too serious", we also have a more playful version of the site: stampy.ai.

Contributions are welcome, the code is released under the MIT License. If you'd like to join the dev team, drop by our Discord and post in #stampy-dev!

Supported URL parameters

  • state - controls which questions are displayed as collapsed / open / related, e.g. aisafety.info/?state=6568_
  • q (string) - search query for sharing direct link to search results (and not just link to 1 question), e.g. aisafety.info/?q=alignment&limit=10
    • limit (number, default 5) - how many results to show
  • embed - show site without header/footer for embedding on other sites, see embed-example.html
    • placeholder (string) - override <input placeholder=...> of the search box
    • theme (light|dark) - override CSS theme (if not provided, the embedded site will use preferred-color-scheme system setting)
    • showInitial - show initial questions as well as the search bar
    • onlyInitial - show only initial questions without the search bar
    • showDetails - open question details (answers) directly instead of just links to aisafety.info

Stampy UI Development Setup

  1. Requirements

  2. Clone the Repo

    • Run git clone https://github.com/StampyAI/stampy-ui.git
  3. Setup in Cloudflare Dashboard

    • If you haven't already, set up your free custom Cloudflare Workers subdomain
    • From the left menu Workers : Overview, note your Cloudflare Account ID on the right
    • From the left menu Workers : KV, create a KV (key-value store) namespace STAMPY_KV
    • Note the new created STAMPY_KV Namespace ID
    • Copy wrangler.toml.template to wrangler.toml
    • Replace the values for your {CLOUDFLARE_ACCT_ID} and {STAMPY_KV_ID} in wrangler.toml
  4. Setup in Coda.io

    • 4.1 (Required) Setup read access to the API view in Coda

      Note: Content in Coda comes from parsing Google Docs (so that site visitors can make suggestions that will be reviewed by our editors). The parser lives in the GDocsRelatedThings repo.

    • When logged in to Coda, Generate API token in your Account settigns

    • Add restrictions: Doc or table, Read only, for the doc with url https://coda.io/d/_dfau7sl2hmG (you need access to the doc of course, which you can request on the Discord)

    • Replace the value for {CODA_TOKEN} in wrangler.toml

    • 4.2 (Optional) Setup write access to the API write view in Coda

      Note: This step is only needed for incrementing counters (helpful, etc.). There isn't a test environment, so any changes there will also effect the live site, so think twice before using them.

      • When logged in to Coda, Generate API token in your Account settings
      • Add restrictions: Doc or table, Read and Write, for the table with url https://coda.io/d/_dfau7sl2hmG#_tutable-eEhx2YPsBE
      • Replace the value for {CODA_WRITES_TOKEN} in wrangler.toml
    • 4.3 (Optional) Setup write access to the "Incoming questions" table in Coda

      Note: This step is only needed if you want to add new questions to Coda, or you want to mark answers as helpful. Seeing as they will then go live, it would probably be better to only set this if you are working on those specific component, in order to not mess up the list of incoming questions.

      • When logged in to Coda, Generate API token in your Account settigns
      • Add restrictions: Doc or table, Read and Write, for the table with url https://coda.io/d/_dfau7sl2hmG
      • Replace the value for {CODA_WRITE_TOKEN} in wrangler.toml
  5. Create stampy-ui Remix environment

    • Change directory to where you downloaded the stampy-ui github repository: cd stampy-ui
    • Run npm install to install all the dependencies required to run the current version of stampy-ui.

Once that's done, you should be able to test and deploy your app!

Local Development

$ npm run dev

Lint and Tests

$ npm run lint
$ npm run test

Tests may rely on cached data from coda. This data can be refreshed by running:

$ npm run refresh-test-data

Deployment to your CF Worker

$ npm run deploy

Production domains are deployed via GitHub Actions.

Add a new domain

If the same CF worker should be reachable from another domain:

  • log in to Cloudflare Dashboard owned by @plexish
  • use Add a site button on homepage, choose the Free plan
    • in the DNS section for this site > Add record for 2 new CNAME records:
    • CNAME @ stampy-ui.stampy.workers.dev
    • CNAME * stampy-ui.stampy.workers.dev
  • go to Workers > stampy-ui > Triggers
    • in Routes section > Add route with the new domain (e.g. example.com/* and select the zone to the just-added site)
  • update your domain registrar to enable CF
  • check the site after a few minutes (CF claims "up to 24 hours", it's usually faster ... but don't share the link too widely on the first day)

stampy-ui's People

Contributors

aprillion avatar bryceerobertson avatar buddy-web3 avatar ccstan99 avatar chriscanal avatar chrisrimmer avatar jmccuen avatar jrhender avatar lcb931023 avatar lucadeleo avatar melissasamworth avatar mruwnik avatar plexish avatar sakgoyal avatar zarsou9 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

stampy-ui's Issues

Drag & drop questions

Drag & drop to reorder questions. Can also drag off the screen from hide/remove from list.

Write Readme.md

  • Link to general project helping info
  • project specific dev environment stuff.
  • Intro to the technologies we're using.
  • License
  • CLS

Hide unanswered related questions

Initial questions and search results are from canonically answered questions already, but the related questions can be unanswered (or un-canonically answered, but we only show canonical answer, so effectively without answer in the UI).

In initial release, let's hide those questions by filtering related questions through the list of canonically answered question titles we use for plain text search.

(In #61, this will be called "visitor mode" and it would be possible to toggle to "editor mode" to see these hidden questions)

Make plaintext search run until TF is loaded

Actual:

  • after fixing #33, we show baselineSearchResults whenever searchResults list form TF is empty and will switch to TF results immediatelly when available

Expected:

  • show baselineSearchResults only while TF is not loaded, then rely fully on TF
  • do not flicker the results for the current search term, switch only for future queries after the initializaiton

Toggle between visitor & editor mode

Have a visitor vs editor (power user?) mode. Visitors only see canonically answered questions. Editors see all canonical questions whether there is a canonical answer or not. When a user clicks on the edit (pencil) icon, they should be offered to switch to editor mode. There should be some way for users to explicit toggle between the 2 modes.

Extra tooltip in search

A tooltip shows up when the search box is empty. May not be a problem on all platforms. Talk to @ccstan99 if you need help reproducing steps.
Screen Shot 2022-06-29 at 11 02 44 AM

Unanswered question text

Let's make the text for both unanswered and uncanonically answered questions be:

We don't have an answer for this question yet. Would you like to [write one](link to create answer using same url as the page write answer button)?

Icon colors & hover odd

The hover on dark mode should be regular not inverted colors.

Icons for question action should be black & white outline normally and full color only on hover.
This code works sometimes to outline the action icons but not initially. Need to reload the page a few times.

.actions svg:not(:hover) *:not(path[style*='fill:#333']),
.icon-link-group .icon-link:not(:hover) svg *:not(path[style*='fill:#333']) {
  fill: none !important;
}

.actions svg:not(:hover),
.icon-link-group .icon-link:not(:hover) svg {
  filter: var(--light, invert(0)) var(--dark, invert(1));
}

Screen Shot 2022-07-03 at 2 14 54 AM

Screen Shot 2022-07-03 at 2 15 08 AM

Switch to using the [See more...] expansion

Parser should capture the text [See more...] (with or without dots and with any capitalization, e.g. [see more] should work), and make a javascript element which on click displays the remainder of the answer. There was an element which did this previously with the wiki backend, which might be useful.

Ideally has the URL change functionality described in #69 and no longer has the bug described in #68

"Helpful" button

Increment a counter in coda, don't let people submit twice without refreshing, but accept that people can mark it multiple times in different sessions as we don't have session tracking?

Tooltips background color

All tooltips (icons at top, actions on questions, search question scores) should have the same background color #fed.

Crashes on iPhone

Tried both Chrome & Safari
Stack trace
O@http://ui.stampy.ai/build/_shared/chunk-TVKKQU54.js:9:14040ir@http://ui.stampy.ai/build/_shared/chunk-TVKKQU54.js:12:270Zi@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:5:64683ta@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:9:111849bs@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:9:104095Kf@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:9:104026st@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:9:103886yi@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:7:100770Ve@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:7:98330Ur@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:9:118922@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:9:120580Zs@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:7:101248qr@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:9:120566module code@http://ui.stampy.ai/build/entry.client-WXWJSFRI.js:9:123964evaluate@[native code]moduleEvaluation@[native code]@[native code]promiseReactionJob@[native code]
IMG_3995
IMG_3997

Check for duplicates in related questions

"Where can I learn about AI alignment" is definitely an important and popular question, but we shouldn't need to show it multiple times on a page. In general, if a question is already on the page, we probably should remove and keep the one closest to top of screen?
Screen Shot 2022-07-05 at 10 31 50 AM
Screen Shot 2022-07-05 at 11 27 04 AM

Infinite scrolling

Scrolling to the bottom would cause a new 10 questions to be loaded, from a pre-defined list here.

Related questions slide glitch

For related questions animation on the iPhone, there's a flicker showing the final state just before the sliding animation begins.
Also add a symbol to the left of indented related question for clearer indication of relationship.
related-questions-tree

Remove selected Q from search dropdown

After a user has selected a question from the search dropdown menu, it should be removed from the list so they can't try selecting it again, which currently causes the system to get stuck.
Screen Shot 2022-07-05 at 11 24 02 AM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.