Skip to content

Commit

Permalink
simplify
Browse files Browse the repository at this point in the history
  • Loading branch information
@adnanwahab
adnanwahab committed Oct 18, 2024
1 parent a816073 commit e49b102
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 17 deletions.
151 changes: 148 additions & 3 deletions web-ui/js/Odyssey-Intro.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,150 @@ const navigation = [
// { name: 'Company', href: '#' },
]


import { FaceSmileIcon as FaceSmileIconOutline, PaperClipIcon } from '@heroicons/react/24/outline'
import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
import {
FaceFrownIcon,
FaceSmileIcon as FaceSmileIconMini,
FireIcon,
HandThumbUpIcon,
HeartIcon,
} from '@heroicons/react/20/solid'

const moods = [
{ name: 'Excited', value: 'excited', icon: FireIcon, iconColor: 'text-white', bgColor: 'bg-red-500' },
{ name: 'Loved', value: 'loved', icon: HeartIcon, iconColor: 'text-white', bgColor: 'bg-pink-400' },
{ name: 'Happy', value: 'happy', icon: FaceSmileIconMini, iconColor: 'text-white', bgColor: 'bg-green-400' },
{ name: 'Sad', value: 'sad', icon: FaceFrownIcon, iconColor: 'text-white', bgColor: 'bg-yellow-400' },
{ name: 'Thumbsy', value: 'thumbsy', icon: HandThumbUpIcon, iconColor: 'text-white', bgColor: 'bg-blue-500' },
{ name: 'I feel nothing', value: null, icon: XMarkIcon, iconColor: 'text-gray-400', bgColor: 'bg-transparent' },
]

function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}

// authenticator only login - otp - no email / password - your phone = good enough - funny QR Code w/ flux
// or tailscale login - key or google login

// https://tailwindui.com/components/application-ui/navigation/command-palettes - probably best one

// https://tailwindui.com/components/application-ui/forms/form-layouts
function Suggestions_for_Improvement() {
const [selected, setSelected] = useState(moods[5])

return (
<div className="flex items-start space-x-4">
<div className="flex-shrink-0">
{/* <img
alt=""
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
className="inline-block h-10 w-10 rounded-full"
/> */}
</div>
<div className="min-w-0 flex-1">
<form action="#">
<div className="border-b border-gray-200 focus-within:border-indigo-600">
<label htmlFor="comment" className="sr-only">
Add your comment
</label>
<textarea
id="comment"
name="comment"
rows={3}
placeholder="Add your comment..."
className="block w-full resize-none border-0 border-b border-transparent p-0 pb-2 text-gray-900 placeholder:text-gray-400 focus:border-indigo-600 focus:ring-0 sm:text-sm sm:leading-6"
defaultValue={''}
/>
</div>
<div className="flex justify-between pt-2">
<div className="flex items-center space-x-5">
<div className="flow-root">
{/* <button
type="button"
className="-m-2 inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
>
<PaperClipIcon aria-hidden="true" className="h-6 w-6" />
<span className="sr-only">Attach a file</span>
</button> */}
</div>
<div className="flow-root">
<Listbox value={selected} onChange={setSelected}>
<Label className="sr-only">Your mood</Label>
<div className="relative">
<ListboxButton className="relative -m-2 inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
<span className="flex items-center justify-center">
{selected.value === null ? (
<span>
<FaceSmileIconOutline aria-hidden="true" className="h-6 w-6 flex-shrink-0" />
<span className="sr-only">Add your mood</span>
</span>
) : (
<span>
<span
className={classNames(
selected.bgColor,
'flex h-8 w-8 items-center justify-center rounded-full',
)}
>
<selected.icon aria-hidden="true" className="h-5 w-5 flex-shrink-0 text-white" />
</span>
<span className="sr-only">{selected.name}</span>
</span>
)}
</span>
</ListboxButton>

<ListboxOptions
transition
className="absolute z-10 -ml-6 w-60 rounded-lg bg-white py-3 text-base shadow ring-1 ring-black ring-opacity-5 focus:outline-none data-[closed]:data-[leave]:opacity-0 data-[leave]:transition data-[leave]:duration-100 data-[leave]:ease-in sm:ml-auto sm:w-64 sm:text-sm"
>
{moods.map((mood) => (
<ListboxOption
key={mood.value}
value={mood}
className="relative cursor-default select-none bg-white px-3 py-2 data-[focus]:bg-gray-100"
>
<div className="flex items-center">
<div
className={classNames(
mood.bgColor,
'flex h-8 w-8 items-center justify-center rounded-full',
)}
>
<mood.icon
aria-hidden="true"
className={classNames(mood.iconColor, 'h-5 w-5 flex-shrink-0')}
/>
</div>
<span className="ml-3 block truncate font-medium">{mood.name}</span>
</div>
</ListboxOption>
))}
</ListboxOptions>
</div>
</Listbox>
</div>
</div>
<div className="flex-shrink-0">
<button
type="submit"
className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Send
</button>
</div>
</div>
</form>
</div>
</div>
)
}




const Thanks = () => {
return (
<h1 className="text-white glowing-rainbow-text mx-auto">
Expand Down Expand Up @@ -118,7 +262,7 @@ export default function Example() {
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
/>
</div>
<div className="mx-auto max-w-2xl py-8 sm:py-12 lg:py-16">
Expand All @@ -139,8 +283,8 @@ export default function Example() {


<div className="text-center">
<h1 className="text-balance text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
Thanks to BotParty.org + Dynamicland.org!
<h1 className="text-balance text-2xl font-bold tracking-tight text-gray-900 sm:text-2xl">
Thanks to <a href="https://botparty.org" className="text-indigo-600 underline">BotParty.org</a> + <a href="https://dynamicland.org" className="text-indigo-600 underline">Dynamicland.org</a>!
</h1>
{/* <p className="mt-6 text-lg leading-8 text-gray-600">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
Expand All @@ -156,6 +300,7 @@ export default function Example() {
{/* <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Learn more <span aria-hidden="true">→</span>
</a> */}
<Suggestions_for_Improvement />
</div>
</div>

Expand Down
23 changes: 14 additions & 9 deletions web-ui/js/views/odyssey/TeleGuidance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import VoxelNotebook from "https://api.observablehq.com/@roboticsuniversity/voxe
import prediction_planning_notebook from "https://api.observablehq.com/@roboticsuniversity/3-planning-prediction.js?v=4";
const observable_titles = [
{
title: "Livekit",
title: "Perception Module",
href: "https://observablehq.com/@roboticsuniversity/livekit",
},
{
Expand All @@ -38,15 +38,18 @@ function ObservableTitle(props) {

function MMO_Prediction_Planning(props) {
const TwitchPlaysPokemonPanelRef = useRef();

const Karpathy_AI_ClassRef = useRef();
useEffect(() => {
const runtime = new Runtime();
runtime.module(prediction_planning_notebook, (name) => {
//console.log(name);
if (name === "Twitch_chat")
return new Inspector(TwitchPlaysPokemonPanelRef.current);
// if (name === "webrtc") return new Inspector(videoRef.current);
console.log("twitchplays-robots", TwitchPlaysPokemonPanelRef);
//console.log("twitchplays-robots", TwitchPlaysPokemonPanelRef);
// if (name === "Karpathy_AI_Class")
// return new Inspector(Karpathy_AI_ClassRef.current);

});
return () => runtime.dispose();
}, []);
Expand All @@ -56,12 +59,14 @@ function MMO_Prediction_Planning(props) {
title="Prediction Planning"
href="https://observablehq.com/@roboticsuniversity/3-planning-prediction"
/>
<div ref={TwitchPlaysPokemonPanelRef} />
<div class="hidden" ref={TwitchPlaysPokemonPanelRef} />
<iframe width="560" height="315" src="https://www.youtube.com/embed/PaCmpygFfXo?si=pamD56WkBAsJBEPF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`

</div>
);
}

function Livekit() {
function Perception_Module() {
const lOGORef = useRef();

useEffect(() => {
Expand All @@ -80,14 +85,14 @@ function Livekit() {
title="Perception"
href="https://observablehq.com/@roboticsuniversity/livekit"
/>
<div>
{/* <div>
<iframe
height="1000px"
width="100%"
src="https://shels-macbook-pro.jerboa-kokanue.ts.net/read_screen_share"
/>
</div>
<div class="hidden" ref={lOGORef} />
</div> */}
<div ref={lOGORef} />
{/* <div ref={videoRef} /> */}
</>
);
Expand Down Expand Up @@ -188,7 +193,7 @@ function TeleGuidance() {
<div className="grid gap-4 lg:grid-cols-2 lg:grid-rows-2">
<div className="relative">
<div className="relative overflow-hidden rounded-lg lg:rounded-tl-[2rem] h-[300px]">
<Livekit />
<Perception_Module />
</div>
</div>

Expand Down
8 changes: 3 additions & 5 deletions web-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,9 @@
"docs:build": "vitepress build",
"docs:preview": "vitepress preview"
},
"devDependencies": {

},
"devDependencies": {},
"dependencies": {
"@heroicons/react": "^2.1.5",
"gmath": "^0.0.6"

}
}
}

0 comments on commit e49b102

Please sign in to comment.