/Stories-A-Million

A community platform that connects writers and readers, enabling the creation of unique stories with the help of the OpenAI API

Primary LanguageJavaScriptMIT LicenseMIT

Table of Contents
  1. Contributors
  2. Technology used
  3. How did we use AI
  4. Getting started
  5. File Contents of folder
  6. Learn More
  7. References
  8. Credits
  9. Licence

Logo

Stories of Million

A community platform that connects writers and readers, fosters collaboration, provides feedback, and assists in creating unique stories leveraging the OpenAI API.
Explore the docs »

See Project · Report Bug · Request Feature

Contributors

Jasper David Noel Juan
_Hi, My name is Jasper, Let's do this! _ _Hi, my name is David, time to harness the power of AI :D _ _Hi, my name is Noel, We got this o2o _ _Hi, my name is Juan! _
Team Lead Fullstack Fullstack Fullstack Fullstack

How to use?

1. Create New story 2. Collaborate to story 3. Merge the story

Technology used

image

Vercel Prisma JavaScript Badge Node Badge Next JS TailwindCSS MongoDB VScode Badge

How did we use AI?

  1. AI played a pivotal role in the creation of our app, particularly in the coding phase. We employed OpenAI's Codex model, also known as Co-Pilot, which enhanced our development efficiency and ensured the application of best practices. This model provided real-time code suggestions, assisted in debugging, and served as an invaluable tool for problem-solving, thereby expediting the coding process and bolstering the overall quality of the app.
  2. In addition to aiding in the app's creation, AI was integral in preparing the data needed for our app. We incorporated OpenAI's Ada model into a Python-based data processing pipeline for dataset fine-tuning. The Ada model helped clean and organize the dataset by identifying and correcting inaccuracies, eliminating duplicates, and filling in missing values. This meticulous dataset preparation improved the data quality, tailoring it to our application's needs and contributing to the app's overall performance.
  3. Our app harnesses the power of AI for several functions. One of its key applications is in text completion, where we utilize OpenAI's text-davinci-003 and 002 model. As users embark on their creative writing journey, the AI model suggests potential progressions for their story, aiding them in their creativity. Another critical function of AI in our app is in genre detection. The app analyses user-generated text and assigns it to a predefined genre. This capability not only assists in organizing the content but also paves the way for personalized recommendations.
  4. Despite these advancements, we encountered a few challenges along the way, primarily dealing with the variability and ambiguity of human language. Our genre detection feature, given the subjectivity and context-dependence of language, found it challenging to always correctly categorize the genre. However, we took these limitations as opportunities for improvement. We diversified our training datasets and used user feedback for model fine-tuning. We also allowed users to manually correct the AI-detected genre, and their corrections were fed back into the model for future learning. This iterative process helped the model learn from its mistakes and adapt to user inputs, thereby continually improving over time.

Getting Started

  1. Get a free( OR not free ) API Key at

  1. Clone the repo

    git clone https://github.com/MiSaengg/2800-202310BBY19

  2. Install NPM packages

    npm install

  3. Create and Enter your API in .env

     NEXTAUTH_URL="http://localhost:3000/"
 NEXTAUTH_SECRET=""

 DATABASE_URL=""
 GOOGLE_CLIENT_ID=""
 GOOGLE_CLIENT_SECRET=""
 NEXT_PUBLIC_OPENAI_API_KEY=""

run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

File Contents of folder

📦 2800-202310BBY19
├─ .gitignore
├─ README.md
├─ app
│  ├─ (auth)
│  │  ├─ layout.jsx
│  │  ├─ signin
│  │  │  └─ page.jsx
│  │  └─ signout
│  │     └─ page.jsx
│  ├─ (site)
│  │  ├─ createMainThread
│  │  │  └─ page.jsx
│  │  ├─ layout.jsx
│  │  ├─ loading.jsx
│  │  ├─ profile
│  │  │  ├─ layout.jsx
│  │  │  └─ page.jsx
│  │  └─ threads
│  │     ├─ [threadId]
│  │     │  ├─ layout.jsx
│  │     │  ├─ loading.jsx
│  │     │  ├─ mainThread.jsx
│  │     │  └─ page.jsx
│  │     ├─ layout.jsx
│  │     ├─ loading.jsx
│  │     └─ page.jsx
│  ├─ components
│  │  ├─ EasterEggTrigger
│  │  │  ├─ EasterEggBBY19Trigger.jsx
│  │  │  ├─ EasterEggCatTrigger.jsx
│  │  │  └─ EasterEggPop.jsx
│  │  ├─ auth
│  │  │  ├─ GoogleSignInButton.jsx
│  │  │  └─ SignInButton.jsx
│  │  ├─ box
│  │  │  ├─ ConnectorLine.jsx
│  │  │  ├─ LReadTextBox.jsx
│  │  │  ├─ RReadTextBox.jsx
│  │  │  └─ mainTreadBox.jsx
│  │  ├─ button
│  │  │  ├─ Button.jsx
│  │  │  ├─ LikesCompleteButton.jsx
│  │  │  └─ VotesCompleteButton.jsx
│  │  ├─ card
│  │  │  ├─ SimpleProfileCard.jsx
│  │  │  ├─ StoryCard.jsx
│  │  │  ├─ profileCardInfo.jsx
│  │  │  └─ profilepage.jsx
│  │  ├─ form
│  │  │  └─ TextField.jsx
│  │  ├─ modal
│  │  │  └─ Modal.jsx
│  │  └─ ui
│  │     ├─ Contributors.jsx
│  │     └─ button.jsx
│  ├─ favicon.ico
│  ├─ footer.jsx
│  ├─ globals.css
│  ├─ head.jsx
│  ├─ header.jsx
│  ├─ layout.jsx
│  ├─ newUser
│  │  └─ page.jsx
│  ├─ page.jsx
│  └─ provider.jsx
├─ jsconfig.json
├─ lib
│  └─ prisma
│     ├─ branchThread.js
│     ├─ index.js
│     ├─ mainThreads.js
│     ├─ threads.js
│     └─ users.js
├─ next.config.js
├─ package-lock.json
├─ package.json
├─ pages
│  └─ api
│     ├─ auth
│     │  └─ [...nextauth].js
│     ├─ profile
│     │  └─ index.js
│     ├─ threads
│     │  ├─ [threadId]
│     │  │  ├─ index.js
│     │  │  ├─ like
│     │  │  │  └─ index.js
│     │  │  └─ unlike
│     │  │     └─ index.js
│     │  ├─ branchThread
│     │  │  └─ index.js
│     │  ├─ index.js
│     │  ├─ mainThread
│     │  │  ├─ index.js
│     │  │  ├─ unvote
│     │  │  │  └─ index.js
│     │  │  └─ vote
│     │  │     └─ index.js
│     │  └─ mergeThread
│     │     └─ index.js
│     ├─ user
│     │  └─ [userId]
│     │     └─ index.js
│     └─ users
│        ├─ [userEmail]
│        │  └─ index.js
│        └─ index.js
├─ postcss.config.js
├─ prisma
│  └─ schema.prisma
├─ public
│  ├─ CollaborateWithOthers2.gif
│  ├─ CreateYourOwnStory2.gif
│  ├─ MergeStory2.gif
│  ├─ SAM_Logo_Final.png
│  ├─ bookCover
│  │  ├─ comedy.png
│  │  ├─ crime.png
│  │  ├─ fantasy.png
│  │  ├─ history.png
│  │  ├─ horror.png
│  │  ├─ psychology.png
│  │  ├─ romance.png
│  │  ├─ science-fiction.png
│  │  ├─ sports.png
│  │  ├─ thriller.png
│  │  └─ travel.png
│  ├─ catjamled.gif
│  ├─ fireworks.gif
│  ├─ fullHeart.svg
│  ├─ heart.svg
│  ├─ horror.png
│  ├─ image01.jpg
│  ├─ next.svg
│  ├─ nineteenbby.gif
│  ├─ nyancat.png
│  ├─ plus.svg
│  ├─ refresh.svg
│  ├─ samLogo3.png
│  ├─ sammember.png
│  ├─ sifi.png
│  ├─ typeWriter.jpg
│  ├─ vercel.svg
│  ├─ vote.png
│  └─ voted.png
└─ tailwind.config.js

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

This is a Next.js project bootstrapped with create-next-app.

References

NextJS Prisma Tailwind css NextAuth OpenAI Vercel MongoDB

Credits

Licence

MIT Licence

Contact Info

Jasper David Noel Juan
✉️ohyj0906@gmail.com ✉️gunheedavidcho@gmail.com ✉️dndyd4924@gmail.com ✉️juanchung7v@gmail.com