Thursday, 22 June 2023

Building a Bio generator for twitter and linkedin using Worqhat AI model

Building BioGenApp: A Next.js Bio Generator with Worqhat AI models

A web application powered by Next.js that allows users to generate personalized Twitter or LinkedIn bio descriptions using AI-generated text.

- `app/index.tsx`: This file contains the main page component where the Bio Generator functionality is implemented.

- `app/Layout.tsx`: This file defines the layout component used to provide a consistent structure for the pages.

- `app/globals.css`: This file contains global styles for the application.

Getting Started

To get started with BioGenApp, make sure you have Node.js and npm installed on your machine. Then, follow these steps:

1. Create a new Next.js project called BioGenApp using the following command:

   ```bash

   npx create-next-app biogenapp

   ```

2. Navigate to the project directory:

   ```bash

   cd biogenapp

   ```

3. Replace the contents of the `pages/index.tsx` file with the following code:

   "use client"

    import { IconSquareRoundedNumber1Filled, IconSquareRoundedNumber2Filled, IconSquareRoundedNumber3Filled } from "@tabler/icons-react";

   import React, { useEffect, useState } from 'react';

   import React from 'react';

   import Layout from './Layout';

   import './globals.css';

   const Home = () => {

     // Bio Generator implementation

     return (

       <Layout>

         {/* Bio Generator UI */}

       </Layout>

     );

   };

   export default Home;

   ```

4. Replace the contents of the `app/Layout.tsx` file with the desired layout structure for your application.

5. Update the `styles/globals.css` file with custom styles to define the look and feel of your application.

Implementing the Bio Generator

Inside the `pages/index.tsx` file, you can implement the Bio Generator functionality. This includes capturing user input, making API calls, and rendering the generated bio descriptions.

To create a form for the user to input their bio details, you can use HTML input elements or React components such as `<input>` or `<textarea>`. Style them accordingly using CSS or CSS-in-JS libraries like styled-components.

```

import React, { useState } from 'react';

import Layout from './Layout';

import '../styles/globals.css';

const MyPage = () => {

  const [textAreaValue, setTextAreaValue] = useState('');

  const [vibeValue, setVibeValue] = useState('');

  const [platformValue, setPlatformValue] = useState('');

  const [generatedBio, setGeneratedBio] = useState('');

  const handleGenerateBioClick = async () => {

    let question = '';

    // Create the question based on the input values

    if (platformValue === 'Linkedin') {

      question = `Generate a ${vibeValue.toLowerCase()} LinkedIn bio: ${textAreaValue}`;

    } else if (platformValue === 'Twitter') {

      question = `Create a ${vibeValue.toLowerCase()} Twitter bio: ${textAreaValue}`;

    }

    const responseData = await fetchBioData(question, true, {}, 0.1);

    setGeneratedBio(responseData?.content || '');

  };

  return (

    <Layout>

      <div className="container">

        <div>

          <h1>Generate your next Twitter bio using Chatgpt</h1>

        </div>


        <div className="icon-heading">

          <IconSquareRoundedNumber1Filled size={32} />

          <h2 className="steps">Copy your current bio</h2>

        </div>

        <textarea

          className="my-textarea"

          placeholder="eg. Senior Developer Advocate @Worqhat. Tweeting about web development, AI, and React / Next.js, Writing nutlope.substack.com."

          value={textAreaValue}

          onChange={(e) => setTextAreaValue(e.target.value)}

        />

        <div className="icon-heading">

          <IconSquareRoundedNumber2Filled size={32} />

          <h2 className="steps">Select your vibe</h2>

        </div>

        <div>

          <select

            className="menuvibe"

            value={vibeValue}

            onChange={(e) => setVibeValue(e.target.value)}

          >

            <option value="">Select an option</option>

            <option value="Professional">Professional</option>

            <option value="Casual">Casual</option>

            <option value="Funny">Funny</option>

          </select>

        </div>

        <div className="icon-heading">

          <IconSquareRoundedNumber3Filled size={32} />

          <h2 className="steps">Select the platform</h2>

        </div>

        <div>

          <select

            className="menuplatform"

            value={platformValue}

            onChange={(e) => setPlatformValue(e.target.value)}

          >

            <option value="">Select an option</option>

            <option value="Linkedin">Linkedin</option>

            <option value="Twitter">Twitter</option>

          </select>

        </div>

        <button className="generatebtn" onClick={handleGenerateBioClick}>

          Generate your bio

        </button>

        {generatedBio && (

  <div 

  className="generated-bio-container">

    <h2 className="generated-bio-heading">Your Generated Bio</h2>

    <p className="generated-bio">

      {generatedBio}

    </p>

  </div>

)}

      </div>

    </Layout>

  );

};

export default MyPage;

```

You can further enhance the functionality by implementing the API calls to generate the bio descriptions based on the user's input. Additionally, you can style the components using CSS classes or CSS-in-JS libraries like styled-components.

# Conclusion

We learned how to build BioGenApp, a Next.js web application for generating personalized Twitter or LinkedIn bio descriptions. We explored the project structure, implemented the Bio Generator UI, and discussed the next steps for integrating the bio generation functionality with Worqhat Ai models.

Feel free to ask and expand knowledge on this project based on your requirements. Happy coding!

Worqhat

View project on github

No comments:

Post a Comment