Team Details

• Ajit Singh - Ajit Singh

Project Description

Introduction

With all the new AI hype, I wanted to try Open AI APIs and learn how these new large language models work. To learn that, I wanted to create an audio summary app where I can learn about the Whisper APIs and the OpenAI API.

This led to AudioSum, which generates summaries of the audio you upload. It is a simple app where anyone can sign up, and then upload their audios, which automatically generates the transcription and summaries of the audio in text form.

There can be many use cases for it, including:

1. Journaling: You can record your journals and upload them to this app. This will give you the transcript of what you talked about on the app.

2. Transcripts: You can upload your audio. This will generate a transcript that you can upload to various places.

3. Thinking: You can record yourself while thinking out loud, and after that, the summary should be able to help you gather your thoughts.

Tech Stack

• Angular: Used to create the front end.

• Appwrite Cloud:

  • Authentication: Used for users to sign up, sign in, forgot password, confirm email, etc.

  • Database: Used to store your transcripts and summaries.

  • Cloud Functions - Python: Used to call the OpenAI API to make transcripts and store them in the database.

  • Realtime: Used to create summaries automatically once file upload is finished.

  • Storage: Used to store your audio recordings.

Challenges Faced

Multiple Events

Appwrite sends multiple "create" events on the upload of a file greater than 5MB, as it sends multiple requests to upload these files. On each request, a create event is fired. I wanted to run the transcription job when a file is created. The create file event seemed like the perfect thing that I needed, but because the function was fired before the whole thing was updated, it failed.

To get around this, I used the real-time events to listen to the create event and only run the function after the chunks uploaded equal the total chunks. The following code was used for that:

uploadEvent = APPWRITE.client.subscribe<UploadEvent>('files', (response) => {
    if (
      response.events.includes(
        `buckets.${environment.APPWRITE_BUCKET_ID}.files.*.create`
      ) &&
      response.payload.chunksTotal === response.payload.chunksUploaded
    ) {
      this.transcribeAudio(response);
    }
  });

Examples of Appwrite Use

I found it a bit difficult to use Appwrite since there were no detailed example guides for Appwrite use on Appwrite.io. It was a bit difficult to understand once I got into Appwrite limitations. For example, there is no way to pull settings from the cloud functions. If you set events on the cloud, you have to write them manually on your appwrite.json file. There is no way to create a chain of functions via events.

However, Appwrite has one of the best support teams that I encountered. When you put any question in the Appwrite support channel on their Discord, it is usually answered in 15 to 20 minutes.

Public Code Repo

Limitations

Right now I'm using the free tier which is why I have limited the size of the audio to be uploaded to 7MB.

Demo Link

Project link: https://audiosum.aicygnus.com/

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week I was sick so there was no updates last week.

This week I mostly focused on my moving my clone to Nx monorepo. While converting it here are some of my findings on how to convert an Angular cli app to Nx monorepo

To convert an angular cli app to nx follow the steps below:-

• Run the automatic nx generator in you app whoch will convert the angular cli project to an nx workspace

  ng add @nrwl/workspace --preserveAngularCLILayout
  

• After that remember project should never be imported into the library. Environments, common models, common components, common services move to an entirely different lib.

Example of moving

1. Environments to a library can be found here

2. Components to a library can be found here

3. Global Services to a library here

4. Global Styles here here

5. To move them to a library generate anew library by nx g lib <lib-name> after that move everything to lib and export everything via the index.ts file.

6. To import the dependencies the paths are added to the tsconfig.base.json from there you can check what shorthand property to use for what imports.

7. When you are done with all this you can now divide your modules into smaller libs like a module into its ui, data-access etc.

8. Dividing the libs is on you its just like the angular module system you can make any module as big as possible and and small as possible.

9. Just remember don't create circular dependencies.

I also moved most of my components to single file components as it was easier to read and most of my components don't need to be multiple file.

Form next time I'll start adding unit tests and integration tests, e2e tests after that this project will be done.

Commits

1. feat: migrate to nx

2. fix: add global services and global components lib

3. feat: move all pages to nx libs

4. feat: move global styles to a library

5. feat: convert into single file components

Let me know if you ant to see any new experiments in the repo.

Github Repo - https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week we finished details page article section and basic comments section.

This week I added the complete comments section. It was one the most complex tasks while building the dev.to ui. The comments structure is a bit complex to render. Comments contain a key called children which can again contain comments so it was like a tree like structure.

├── comment
│   ├── comment ─── comment
│   │   └── comment
│   ├── comment
│   ├── comment ─── comment ─── comment
│   │   └── comment ─── comment ─── comment
│   └── comment
├── comments
│   ├── comment ─── comment
│   │   └── comment 
│   └── comment 
├──── comment
│   ├── comment
│   └── comment
└──── comments

How to render an infinite tree. Then I called the comment component from the comment component. To create a recursion like scenario which will render the entire component tree. I've written details about it in this article.

Vimal Patel has also added commit lint to the repo so that reading the commit messages is easy. I'm thankful for that.

First Live stream

I also did my first live stream with Santosh on moving over our app from angular-cli to NxDevTools we did the basics in the stream and I went over a lot of questions that I have to why Nx if you want to see how to move your project over Nx please follow us on This is tech Talks we will be migrating the whole dev.to clone to Nx over the live stream. This was my first talk I was a bit nervous but Santosh made me at ease. Thanks Santosh.

So this is where we are right now.

Next week I'll start working on the podcast page.

Issue

1. Create a 404 page

2. Comments section css is a bit off

3. Add number of child comments in comments section

Commits

1. Commit lint

2. Basic comments

3. Comments section completed

Github Repo - https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week we added basic details page.

This week I added user details and a reaction section in article details. There is no API for adding reactions to actual dev.to site so the reactions component is read-only for now.

This week I have good news Chellappan did the listings page for us. I am really happy this is a first opensource contribution in my project. Thanks Chellapan

He implemented the masonry layout in this and next I'll write how he implemented the masonry layout.

Now back to my work this time added a global component store for user details in the article-details component. I also had a lot of problems with the layout of the page the layout was not working correctly whatever I set in the grid-template-columns but after putting a lot of time in it I realized its just that article details content is not working correctly either the image was bigger then the body or the code-snippets were. I was really tired of this, to solved this problem my mind told so what is not styled the details content. This made me realize that the problem should be there. Then I checked and then there it was so for now I made images with width 100% and its working fine for now. This is where we are now. Next week I'll style article details and on the comments section.

Issue

• The article section is really getting on my nerves. Making so many stores for articles is annoying.

• Moving it to Nx. I've heard a lot about Nx this will be my first Nx project.

Commits done

Branch

1. WIP: added listing pages and masonary layout

2. wip: listings cleanup

3. cleanup: review comment fix

4. cleanup: remove unused code

5. added sidenav nav functionality

6. article details page with sidenav

7. resolve splice bugs

As you can see a lot of content was added. Now we will soon dive into improving it more using Nx and Tailwind once we finish the basic application.

Github Repo - https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week we added details page but did not style the middle articles portion.

This week I added the article section CSS and added basic comments the comments section. Is on a different branch so will not deployed right now.

We have new contributors too Nivetha Mani who is building the videos detail page did a great job she has already completed it added infinite scroll and made everything responsive too she has already completed her work but there are some small changes after that her work would be merged. To have a look you can have a look at her pull request and let me give you a sneak peek.

This week I had a lot of problems with the CSS because the article body was injected and I still could not do the code highlighting properly. It was really really tiring.

I also resolved other small bugs added GitHub action for deployment on main branch. Lets talk about the small bugs earlier the reactions section was static I added the reactions store so that they are dynamic but there is no reaction api provided by the dev.to/api it so lets see if this is going to be a problem as its structure can change anytime because of no support.

I also ran into the grid overflow problem mostly grid automatically takes the free space using fr units but some elements in it does not play well. I came to know about this https://css-tricks.com/preventing-a-grid-blowout/. It was a tricky problem because I put an hour into fixing my inner code blocks but the problem was with the grid.

Adding the GitHub action was fun I have with CI/CD but only on Gitlab I didn't think it would be this different adding actions for other repos seems a weird concept to me but maybe it grows on me. Lets have a look at the GitHub action.

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch: 

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  firebase-deploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      # Setup node version which this action will run
      - uses: actions/setup-node@master
        with:
          node-version: '14.x'

      # Install node_modules as we don't push them
      - run: npm install
      # Build our angular app
      - run: npm run build
      # Firebase action to deploy. Still don't fully understand this concept
      - uses: w9jds/firebase-action@master
      # With what arguements will this action run
        with:
          args: deploy --only hosting --project dev-toclone
      # Environment variables with which you want to run your job. To keep them a secret you can set in your repository secrets 
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Let me give you the sneak peek of the newly created comments section too this is going to be hard as the way comments are but we are going to use recursion here to render out all the comments. That is going to interesting you will see a new pattern of rendering these types of structures.

Current Status three branches :-

Main - This branch contains the Homepage, Article-detail with comments, Listing page

Comments - This branch contains the comments section of the article detail page

Nivetha Mani - This branch contains the videos section

Discussions

I've started a new discussion weather we should move the project to Nx on main branch or keep it on angular-cli. Would love to hear everyone's opinion.

Issue

1. In article details page syntax highlighting does not work

2. Do we need store for all api

Commits

This time I won't add all the commits there are many I "ll highlight the most useful

1. add github actions for deployent on main branch

2. fix article details

3. Reactions data added

4. Fix grid layout and add article detail styles

Next time I'll finish the comments section. if anyone wants to contribute they can connect on twitter with me my handle is @ajitsinghkaler my dm's are open or on github.

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week I added article section dev.to clone.

This week we added the tags store and joined the tags to the api. We mostly follow a pattern to add an api service which makes all the api calls and a store service which sores al the data related to that service.

We also added listings using the same pattern. This is the first time we used rxLet. It really makes working with all Observable in the templates easier do check it out. It allows you four states for an observable suspense, error. complete so that you can handle each one of them separately and gets rid of the ngIf with async pipe. Like if you want to display something else while loading and error is a big disadvantage of the async pipe when used with an api.

There was one interesting thing we did this time we created a reusable component which when passed a tag will show all the top articles from these tags in the last 3 days if you want to check this out.

This is how it looks now Next week we will start working on article details page.

Issues

Issue The article tag store and article store are quite common can we make them one. Same for listings HTML and article-tag HTML. I'm not sure what to do about this.

Commits done in this update

1. added right side tags articles
2. add listings to homepage
3. add tags store

Contributions

Chellappan has also offered some help. He will raise a detailed feature request on what he will work on Waiting for that.

If you want to contribute too. I've created a lot of issues. Anyone can work on issues but for feature requests you have to raise a detailed feature request before working on it.

Sunny also raised his first pr on the project. Thank you sunny.