Forem: Siddharth

How I created a kids’ story creator using GPT3 ?

Siddharth — Thu, 24 Nov 2022 19:01:54 +0000

Being an active twitter user, I came across a plethora of AI tools and side projects people made primarily using stable diffusion and GPT3. I realized the huge potential of all these algorithms, and found the side projects to be really fun experiments. I decided to deep dive into GPT3, and use it to create an app which creates stories based on genres and characters.

Try it out here — https://gpt3stories.vercel.app/

OpenAI provides two types of AI models, GPT3 — which is a text generation model and DALL-E which is an image generation model. I read the GPT3 docs which are pretty succinct and easy to understand. OpenAI also provides 18$ worth of credits for the GPT3 models, which makes it easy to experiment and build projects. The key to getting the desired results from either of these models depends on how well you write the prompts.

Prompt is basically a statement explaining what you want the algorithm to create.

For e.g

A prompt given to DALL-E could be “Create a Van Gogh style painting of a Coca-Cola can”.

A prompt given to GPT-3 could be “Explain the history of Greece to a 5 year old”.

OpenAI provides a playground where you can type prompts, see the results and tweak accordingly.

I wanted to get stories from different genres having different characters, and to abstract away the requirement of typing a prompt which is still pretty esoteric for people not from a tech background had to design a UI which should appear self explanatory.

I started designing in Figma, and choose to use simple and familiar radio buttons and checkboxes for the user to select a genre and a maximum of 2 characters.

I choose to code the app in NextJS, it’s a full stack React framework and I could write an API which uses the openAI SDK to create results without the need to create a seperate expressJS project and host it.

I have also used framer motion to create subtle animations. Further the background image that I have used is generated by DALL-E

It’s incredibly easy to use the openAI nodejs SDK.

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.API_KEY,
});

const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  const body = req.body;
  console.log(body);
  const prompt = `Write a long form ${body.genre} story which has a ${body.characters[0]} and a ${body.characters[1]}`;
  console.log(prompt);
  const response = await openai.createCompletion({
    model: "text-davinci-002",
    prompt: prompt,
    temperature: 0.7,
    max_tokens: 3000,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  return res.status(200).json({ data: response.data.choices[0].text });
}

That’s pretty much how you pass a dynamic prompt using string interpolation and return the response.

Would love to collaborate on more such projects, you can find me on twitter

**
Try it out here — https://gpt3stories.vercel.app/**

Framer Motion - AnimatePresence

Siddharth — Wed, 09 Nov 2022 09:45:12 +0000

This is the third post in the series where I have been sharing my learnings as I learn FramerMotion. You can check out the first two posts here — (post 1, post 2).

AnimatePresence **component facilitates running exit animations as elements are removed from the react tree(unmounted**). This is actually pretty handy because react does not provide any lifecycle method to run some logic before a component is unmounted and delay the unmounting before the logic has completed running.

How does it work ?

In the above example, the 2 divs have the same animation in animate prop. The second motion.div is wrapped within the AnimatePresence Component. We are toggling a state variable on button click to make the divs mount and unmount.

AnimatePresence works by detecting the unmounting of the direct child or children. All the direct children should have a unique key prop, the significance of which we will discuss below. If the direct child unmounts (the 2nd motion.div )(on button click in this example), the animation provided in the exit prop runs.

The exit prop can even be provided to all the motion components within the direct child and those animations will run too.

Animating Page transitions — React router Dom

While transitioning from PAGE-1 to PAGE-2, we can run exit animations on PAGE — 1 and vice versa.

In the above example we have 2 routes, “/” which renders Home page, and “/profile”, which renders profile page.

As you switch between the pages, you would notice that the opacity of the word — “Home or Profile” is animated to 0 (for, e.g. when going from home to profile, the word “home” disappears and then the page transition occurs).

The routes are defined in a separate component called AnimatedRoutes, since we need to use the useLocation hook, which is only available in components wrapped under BrowserRouter.

export default function AnimatedRoutes() { const location = useLocation(); console.log(location.pathname); return ( <AnimatePresence mode="wait"> <Routes location={location} key={location.pathname}> <Route path="/" element={<Home />} /> <Route path="/profile" element={<Profile />} /> </Routes> </AnimatePresence> ); }

We have wrapped the Routes component with AnimatePresence.

mode=”wait” means the old component is animated out before the new component enters.

As mentioned above, we need to give a unique key prop to the direct child of AnimatePresence. location.pathname (2 possible values in this example / or “/profile”) is used as the key. Whenever a component’s key changes, React considers that a new component, so the old component is unmounted and the new one is added to the react tree.

With this info, let’s see how the exit animation works in the above example during page transitions.

1 — When the current page is home, key’s value is “/”

2 — When you navigate to profile, key’s value becomes “/profile”

3 — As key changes, React unmounts the old component which is the home page

4 — AnimatePresence detects this unmounting and runs exit animations on all the motion components nested inside the homepage (all which have the exit prop), in this case we have exit prop on 1 motion.div inside Home component.

5 — Once the animation is complete, the page is transitioned to “/profile”.

I will be sharing more such posts as I continue to explore Framer motion.

Open to discussions on twitter

Framer motion — useMotionValue & useTransform

Siddharth — Thu, 03 Nov 2022 11:46:54 +0000

Continuing the series of posts that I am planning to write as I explore framer motion (check out the previous post here), this one explains my understanding of useMotionValue & useTransform using a few simple examples.

useMotionValue
In framer motion, to animate any element we use motion components, the motion component for a

would be , for h1 and “motion” is imported from framer motion — import {motion} from “framer-motion”

Internally framer motion uses motion values to track the state and velocity of all motion components. State is basically the value which is being a animated or in other words the value which changes to cause the animation.

Example 1

In example 1 above, you can drag the div horizontally(along x axis), the drag constraints and 0 and 400px, so it cannot be dragged left, but can be dragged right till it reaches 400px.

Above picture shows the css styles applied to the the example 1 div, so framer motion internally uses translateX property to slide it along the X direction.

so this translateX value is being tracked in a motion value created automatically.

useMotionValue allows us to create a motion value manually and inject it into a motion component into the style attribute.

const x = useMotionValue(0);

This creates a motionvalue stored in x(could be named anything) and injected into the style attribute of the motion.div.

so now the motionvalue x is in sync with the translateX value.

We can listen to the changes in x and perform some actions.

useEffect(() => { x.onChange(() => { console.log(x.get()); }); }, []);

We have attached a listener to x using onChange **method and are printing the value (accessed using **x.get()) to the console. so as you drag the div, you will values in the range of 0 to 400 being printed.

Example 2

The second example in above codesandbox shows how we can manually set the motion value and see changes in the UI. We are using a state variable which increases by 10 every time you click the button, causing a useEffect to run where we assign the state value to motion value using set method. useSpring can also be used in place on useMotionValue(remove the comment and try), the transition will be a more smoother spring animation.

Example 3

In the codesandbox above, as you drag the div to right, it’s opacity starts reducing and once the div reaches the constraint of 400px, it’s 0.

useMotionValue along with useTransform. useTransform transforms one or more motion values to give new motion values.

const x1 = useMotionValue(0); const opacity = useTransform(x1, [0, 400], [1, 0]); // useTransform(motion value, range of motion values, range of output values); x1 = 0 -> opacity = 1 x1 = 400 -> opacity = 0

We have both x1 and opacity are then injected into the style attribute.

So we are able to update visual properties (opacity in this case) without triggering react re-renders.

Example 4

Here we are using motion value to synchronize motion across 2 divs. As you drag the 1st div to right, the progress bar is updated.

We are using useTransform to map the x value to the width of the progress bar.

If you have any made any interactions using framer motion, do share them in the comments, would love to learn from those. Also you can DM me on twitter

PS — the embedded codesandbox has all 4 examples.

Framer motion - Layout Animations

Siddharth — Wed, 02 Nov 2022 06:26:39 +0000

I have been learning framer motion lately, and came across this concept of layout animations which is simple yet effective in a way that you can add subtle animations to make layout changes look elegant and smooth.

Before sharing some examples of how layout animations work, let me briefly describe what framer motion is — quoting their landing page, it’s a “A production-ready motion library for React” which helps react developers create declarative animations.

What are layout animations ?

Layout animations basically animate any layout changes which occur when a component is re-rendered.

For example, a change in the width or height of a div, flex items moving due to a change in justify-content property, re ordering of a list, etc.

In order to add layout animation to any element, we just need to add the **layout **prop.

Let’s see some examples (these can also be found in the official docs).

Example 1

This is a basic expanding div — where the width and height are changing when you click the div. A state variable tracks whether the div is expanded or not and based on the data attribute being true, the width and height are changed in the CSS. A caveat is, the layout prop is added even to the child div, when there’s no change in it’s layout, not adding it would cause it to distort during the animation, try removing it and clicking on the it. To overcome this, framer recommends to add layout prop to the child as well.

Example 2

This illustrates a change in layout caused due to a change in flexbox’s justify-content property. The value toggles between flex-start and flex-end based the state variable which toggles as you click on the div.

The layout animation duration can be set in the transition prop.

Example 3

This one shows how to implement shared layout animations.

So the animation has 3 tabs, as you select any one of these the underline slides below the selected one.

The underline div which gets re rendered every time the selected tab state changes has a prop called layoutId. Adding a layoutId prop causes the old component to automatically animate out.

So when tomato is selected the underline below it the “current” component which has a layoutId value of “underline”, as you select lettuce, the UI is re-rendered, the underline below tomato becomes the old component as it is not rendered and is “animated out”, and it moves under lettuce.

I will be writing more such posts, as I explore more of framer-motion.

You can find me on twitter