DEV Community: Paweł Ciosek

Minify your images and save the planet 🌍🙏

Paweł Ciosek — Sun, 12 May 2024 21:28:29 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast, Build with Blobs

What I Built

I have created a tool to optimize your images, which also analyzes how much CO2 we will save by transferring reduced images!

The idea is simple, you can upload your images and download them after optimization, thanks to which your content will be more optimal and ecological! I made sure that it is possible to upload many files at once and download them all with one click 😎

Additionally, we count how much we potentially managed to reduce CO2 emissions 🌲 by reducing the energy needed to send content! Cool! After optimization, you have a chance to become contributors in the fight against co2 emissions 🏅

Demo

Link to demo

pavelee / optimizer-netlify-challenge

Image Optimizer

What is this?

This is submission to https://dev.to/devteam/join-us-for-the-netlify-dynamic-site-challenge-3000-in-prizes-3mfn

It uses Netlify's CDN and blob store to optimize images on the fly.

More info here: https://dev.to/pavelee/minify-your-images-and-save-the-planet-4bnc

Developing Locally

Clone this repository, then run npm install in its root directory.
For the starter to have full functionality locally (e.g. edge functions, blob store), please ensure you have an up-to-date version of Netlify CLI. Run:

npm install netlify-cli@latest -g

Link your local repository to the deployed Netlify site. This will ensure you're using the same runtime version for both local development and your deployed site.

netlify link

Then, run the Next.js development server via Netlify CLI:

netlify dev

If your browser doesn't navigate to the site automatically, visit localhost:8888.

Running locally on MacOs

You need to install curl on your local machine to run the netlify dev command. You can install curl using the following command:

brew install curl

View on GitHub

Platform Primitives

This challenge was not easy to start, initially I had no idea how to creatively use the indicated tools. The obvious idea is an image gallery, but as I'm not a great designer, I wanted to make something that would have a little more logic in it 😎

After some time, I came up with an idea how to combine storage blob and CDN to enable the user to optimize images? Such tools exist on the market, so there must be a problem! 👏

Additionally, to diversify the topic a bit, I thought that an incentive for optimization could be the belief that the smaller the images, the less energy is needed to transfer them. Therefore, less energy, less CO2!

As for co2 counting, I use the library https://www.npmjs.com/package/bytes-to-co2 👏
As you can see, the problem is simplified for challenge purposes, in practice we have different co2 emissions depending on the country, it's not that simple! 🫣

To perform the optimization underneath I query Netlify's CDN to perform the optimization and then I store it in a Blob. The user can set a lower quality to perform even greater image optimization 🥳

Additionally, I use Blob as a Database 😅, I keep three objects there:

Image (basic information about file, size etc.)
Asset (consists of images and information about them)
AssetGroup (aggregates assets)

I was curious how it would work and it's good! 👏 Suitable for a simplified database. This allowed me to model a system for calculating reduced weight and CO2 after optimization.

Interestingly, when you upload, your AssetGroup will be created and its ID will appear in the link. This will allow you to return to your photos after refreshing the page! You can even share the link with someone else! 👏

See you in the next challenge! 🚂♥️

Dev.to chatbot! 🤖

Paweł Ciosek — Sun, 28 Apr 2024 20:50:58 +0000

This is a submission for the Coze AI Bot Challenge: Bot Innovator.

What I Built

I built dev.to chatbot! 🤓

The bot is able to search the content of our beloved website and answer our questions.

For example, you can ask him to send you an article on a specific topic, and he can also analyze the found content in terms of the information I am looking for! 🤓

I see that it has potential as an advanced search engine for website content!

To create the robot, I wrote a plugin for integration with the search engine and the dev.to API 🤗, more information in the journey section 🚂

Demo

Link to bot: https://www.coze.com/store/bot/7358908091464794117

Your Configuration

Journey

It was an interesting task, initially it seemed much simpler, but in practice I got a little tired 😅

First of all, I want to mention that the coze.com platform is great! I had a lot of fun creating a bot or plugin is easy. I really like the built-in IDE for building the plugin, bravo! 👏

I was wondering about the use case for using the robot. Why would it be of value to anyone. I had a problem with this, but I decided to build a prototype to see how the AI would use what I prepared. 🧑‍💻

At first I started using the "Browser" and "Google web search" plugins. However, the bot is unable to use the search engine on the dev.to website 😭 (it probably has problems with dynamically loaded content)

So I thought there must be some other way 🫰, I started searching for the API and found it 🥳

https://developers.forem.com/api/v1

The great joy was quickly extinguished by the fact that the API does not have a search engine 😭, there is an end for downloading published articles, but the results are completely different, and that's what I wanted. 🙋

Still looking for a solution, I started analyzing how the search engine works, guess what? I found that the search engine queries the endpoint underneath! 🥳 (not in the documentation 🫣)

https://dev.to/search/feed_content

Best of all, you can search not only articles but also users, podcasts, organizations, tags and comments! 🚀

At this point I already had the integration tool, but how do I integrate it with the chatbot? 🤖

The answer is a plugin! At the very beginning, I knew that I would need to prepare a simpler interface for the chatbot, so I immediately started working on a plugin built in the IDE. 🧑‍💻

Ultimately, it turned out that I would need:

content search tools
a tool to download article details (content), so that the chat bot can analyze the content in terms of the content I am looking for

However, along the way I created more tools, but these two remained as the most sensible ones.

I needed to add some of my own code, for example to build an appropriate query to the search engine endpoint:

const buildSearchQuery = async (input: Args<Input>['input']) => {
  let data: Record<string, string>  = {
    "class_name": objectTypeVales[input.object],
    "per_page": '60', // it's default value on dev.to. We want chatbot to use search like a user.
    "page": '0', // default value
    "search_fields": input.phrase
  };

  if (input.sort_by === 'newest') {
    data = {
      ...data,
      "sort_by": "published_at",
      "sort_direction": "desc",
    };
  }

  if (input.sort_by === 'oldest') {
    data = {
      ...data,
      "sort_by": "published_at",
      "sort_direction": "asc",
    };
  }

  const params = new URLSearchParams(data);
  const query = params.toString();

  return query;
}

After writing the code, a plugin for dev.to was created 🤓 -> https://www.coze.com/store/plugin/7362263649500741638

With connecting the plugin to my bot, I got an answer to a question that the previous bot was unable to answer. 🥳

The last thing left to decide was which model to connect to the test:

ChatGPT 3.5 -> quick replies, but unfortunately not very accurate
ChatGPT 4 -> slower, responses much better. Unfortunately, there is too little context to analyze more content
ChatGPT 4 turbo -> even slower, but gives the best results.

Finally, I set ChatGPT 4 Turbo, after testing it is the most practical for a chatbot.

I'm curious about your chatbot use! Is it practical for you? How can it be developed?

See you in the next challenge!

Empowering Creative Writing with AI: An Introduction to the Cloudflare AI Challenge Markdown Editor

Paweł Ciosek — Sun, 14 Apr 2024 19:59:51 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

I built tool to allow write your posts with AI assistance. Genuinely it's basic markdown editor, but with handful AI tools around it!

AI assistant - chat with AI, ask about anything, you can select preferred model
AI title generator - generating propose of title based on your text summary
AI cover generator - generating propose of cover based on your text summary

I tried it myself, and creating titles or covers from my post is handy! 🤓

What's crucial is that I wanted to avoid creating an app for generating posts, instead, I aim to encourage people to write on their own. Let's be pilots, and keep AI as co-pilot.

Demo

Link to app

My Code

pavelee / cloudflare-challange-post-ai

write post with AI assistance, dev.to challenge

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

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

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

Learn More

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

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

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.

`@cloudflare/next-on-pages`

@cloudflare/next-on-pages…

View on GitHub

Journey

It was really full of fun project! 🥳

AI apps still have some magic within! 🤓

I am quite impressed with Cloudflare for releasing such an excellent feature, using models is pretty easy. The documentation is clear 👏

I deployed app on Cloudflare Pages. Typically I use Vercel could 😅, but I wanted to give it a try. Deploying was pretty ok, with some troubles. After reading docs I was able to deploy Next.js to Pages 👏 Cool! 😎

My first problem was storage 💾, my goal was to allow user keep their work and chat history. Firstly I thought to use supabase but I noticed that Cloudflare has a KV! KV is a simple key-value storage. Great for this kind of an app! 🤓

My second problem was data structure. I needed nested object, called "project" 🫣 and KV is flat 🌏 storage. Solution was to storage it as a JSON! 😅 Not an optimal way but it is a pretty enough to develop the app!

My third problem was generating title for the post. I couldn't pass the whole text to "text generation" model because it was too huge 🫣. Solution was to use "summary model" as a proxy! 🤓

What I proud of

I was able to host the whole project on Cloudflare infrastructure! 👏
storage configuration

I created interface:

export interface Storage<T> {
  get: (key: string) => Promise<T>;
  set: (key: string, value: string) => Promise<void>;
  remove: (key: string) => Promise<void>;
}

then I implemented "KVStorage" and configured it inside the config file

import { KVStorage } from "../util/storage/KVStorage";
import { Storage } from "../util/storage/Storage";

const cloudfrareKey = process.env.CLOUDDLARE_KV_API_KEY;
const cfAccountId = process.env.CLOUDFLARE_ACCOUNT_ID;
const cloudflareKvNamespaceId = process.env.CLOUDFLARE_KV_NAMESPACE_ID;

if (!cloudfrareKey || !cfAccountId || !cloudflareKvNamespaceId) {
  throw new Error("Cloudflare key or account ID is missing");
}

export const storage: Storage<string> = new KVStorage<string>(
  cfAccountId,
  cloudflareKvNamespaceId,
  cloudfrareKey
);

In the app I am using storage object that implement interface so you can easily change to other storage! 🥳

Multiple Models and/or Triple Task Types

AI Assistant

Based on text generation models, user can choose from:

meta/llama-2-7b-chat-fp16
thebloke/openhermes-2.5-mistral-7b-awq
mistral/mistral-7b-instruct-v0.1
tiiuae/falcon-7b-instruct
google/gemma-2b-it-lora
nousresearch/hermes-2-pro-mistral-7b
thebloke/llama-2-13b-chat-awq
qwen/qwen1.5-14b-chat-awq

AI Title Generator

First I use "bart-large-cnn" to summary text:

facebook/bart-large-cnn

Then I use "nousresearch/hermes-2-pro-mistral-7b" to generate title

AI Cover Generator

First I use "bart-large-cnn" to summary text:

facebook/bart-large-cnn

then user can use one of models:

lykon/dreamshaper-8-lcm
runwayml/stable-diffusion-v1-5-img2img
runwayml/stable-diffusion-v1-5-inpainting
stabilityai/stable-diffusion-xl-base-1.0
bytedance/stable-diffusion-xl-lightning

we_coded iMac CSS Art

Paweł Ciosek — Sat, 30 Mar 2024 22:25:01 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

My inspiration was apple iMac (Mac in css 😅), although we still celebrating we_coded 2024, so I wonder how could I join both ideas! Create the art and support the great event! 🤓

Demo

source code: https://github.com/pavelee/css_art

Journey

It's my first time creating css art! 🥳

Firstly I thought it's gonna be harder, but step by step I was moving forward. What important I had really fun time! 🤗

Getting good CSS structure is still challenging for me, I used pure CSS without any preprocessors and I could say it's pretty hard to make it clear! 🥲

I thought how could I refractor the code. I tried to create mac's window template, so it's reusable and shared across two windows on my Mac

  <!-- window tempalte -->
  <!-- <div class="window">
    <div class="bar">
      <div class="controls">
        <div class="close"></div>
        <div class="minimize"></div>
        <div class="maximize"></div>
      </div>
      <div class="title"></div>
    </div>
    <div class="body"></div>
  </div> -->

For sure it's a good direction to keep it more clear! 🚂

That was a good time 🧑‍💻, thanks for the challange! ♥️

CoLlama 🦙 - code autocompletion (local machine and free)

Paweł Ciosek — Sat, 24 Feb 2024 19:50:42 +0000

In the recent post, I write about using codellama as our local version of code assistant.

CoLlama 🦙 - ollama as your AI coding assistant (local machine and free)

Paweł Ciosek ・ Jan 1

#ai #ollama #githubcopilot #codenewbie

There was a sentence:

The extension do not support code completion, if you know extension that support code completion, please let me know in the comments. 🙏

You know what? I found a way to use llama to support code autocompletion! 🥳

As you guess 🤓 you need ollama installed locally, if you don't have, take a look to the previous post 🙏

So what we need:

ollama model codellama:7b-code
extension CodyAI -> https://marketplace.visualstudio.com/items?itemName=sourcegraph.cody-ai

Let's configure it together, step by step! 🧑‍💻

Download codellama:7b-code

Extension require this model, you cannot choose any other 🫣, but it is pretty good optimised to the job ⚙️



ollama pull codellama:7b-code

Install CodyAI extension

You gonna find it in an extension browser bar by searching "cody ai"

Configure CodyAI to use ollama as your companion

go to vs code settings
put inside search bar: cody.autocomplete.advanced.provider
you should see the option
set it to "experimental-ollama"

Make sure CodyAI autocompletion is enabled

Click on CodyAI icon at the bottom right bar
make sure option "Code autocomplete" is enabled

Make sure you are running ollama

That seems obvious, but it's worth reminding! 😅

Test it!

Summary

So right now you can have ollama supporting you as chat assistant and with code autocompletion as well! 🤩

Locally, secure and free! 🆓

Did you try ollama as code companion? What do you think about it?

2024 Resolution

Paweł Ciosek — Thu, 11 Jan 2024 19:10:46 +0000

My 2024 Resolution is pretty stright forward: I want to write at least one article per month on Dev.to 📝

That's it. 🥳

I know it's not a fancy one, but i want to make it achievable. I'm not a native english speaker, so writing articles is a challenge for me. I hope that by the end of 2024 i will be able to write articles without any problems. 🤞

Keep it up! 🚀

CoLlama 🦙 - ollama as your AI coding assistant (local machine and free)

Paweł Ciosek — Mon, 01 Jan 2024 19:29:16 +0000

Hello 🙋 first of all, Happy New Year! 🎉

TLDR

If you in hurry, below a mindmap to quickly consume the content. 🕒🥗

Click here to see the mind map in xmind

AI Coding Assistant

AI Code Assistants are rapidly gaining popularity in the tech industry. They are becoming an essential tool for programmers, providing assistance in writing code, debugging, and even generating code snippets. Mastering the use of an AI Code Assistant is becoming a necessary skill for modern developers.

There are several AI Code Assistants available in the market. GitHub Copilot, AWS Codewhisperer, Tabnine. There are many more tools available, each with its unique features and capabilities.

However, most of these tools come with their own set of limitations. Many of them are not free, although they often offer trial versions for users to test out their capabilities. Additionally, these tools typically work by sending your code to an external server, which might raise privacy concerns for some users. Lastly, these tools are generally limited to answering programming-related questions and may not be able to assist with other types of inquiries.

What is ollama?

Ollama is a user-friendly tool designed to run large language models (LLMs) locally on a computer. This means it offers a level of security that many other tools can't match, as it operates solely on your local machine, eliminating the need to send your code to an external server. Plus, being free and open-source, it doesn't require any fees or credit card information, making it accessible to everyone. 🥳

You can find more about ollama on their official website: https://ollama.ai/. It's designed to work in a completely independent way, with a command-line interface (CLI) that allows it to be used for a wide range of tasks. It's not just for coding - ollama can assist with a variety of general tasks as well.

One of the standout features of ollama is its library of models trained on different data, which can be found at https://ollama.ai/library. These models are designed to cater to a variety of needs, with some specialized in coding tasks. One such model is codellama, which is specifically trained to assist with programming tasks.

Even, you can train your own model 🤓

Run ollama locally

You need at least 8GB of RAM to run ollama locally.

Running ollama locally is a straightforward process. The first step is to install it following the instructions provided on the official website: https://ollama.ai/download.

If you are Windows user

If you are a Windows user, you might need to use the Windows Subsystem for Linux (WSL) to run ollama locally, as it's not natively supported on Windows. You can find instructions on how to install WSL on the Microsoft website: https://learn.microsoft.com/en-us/windows/wsl/install.

Once ollama is installed, the next step is to download the model that best fits your needs. For programming-related tasks, it's recommended to use the codellama model.



ollama pull codellama

After the model is downloaded, you can start using ollama.



ollama run codellama

How to integrate ollama with my editor?

Integrating ollama with your code editor can enhance your coding experience by providing AI assistance directly in your workspace. This can be achieved using the Continue extension, which is available for both Visual Studio Code and JetBrains editors. You can find the extension at https://continue.dev/.

Once the extension is installed, you'll need to configure it to work with ollama. This involves adding ollama to the extension's configuration file. In your home directory, look for the .continue folder (e.g., /Users/pciosek/.continue) and edit the config.json file. Add the ollama model to the "models" section as follows:



{
  "models": [
    {
      "title": "CodeLlama",
      "model": "codellama",
      "provider": "ollama"
    }
  ]
}

More information about this configuration can be found at https://continue.dev/docs/reference/Model%20Providers/ollama.

After updating the configuration, restart your editor for the changes to take effect. You should now see ollama listed as a model in the extension's sidebar. 🥳

Now you're ready to use ollama in your editor!

Two ways to use ollama in your editor

Open the extension's sidebar and start the conversation.
Inside code editor, select the code and press (cmd/ctrl) + M to start the conversation. Selected code will be use as a context for the conversation.

More about the extension can be found at https://continue.dev/docs/intro

Below an example of generating tests for a component

The extension do not support code completion, if you know extension that support code completion, please let me know in the comments. 🙏

Conclusion

AI Code Assistants are the future of programming. It's imporant the technology is accessible to everyone, and ollama is a great example of this. It's free, open-source, and runs locally on your machine, making it a great choice for developers looking for an AI Code Assistant that is both secure, free and easy to use. 🥳

Share your thoughts

What do you think about ollama? Do you use any other AI Code Assistants? Maybe did you use other models? Let me know in the comments below! 🙏

Test your skills with AI assistance

Paweł Ciosek — Wed, 19 Jul 2023 22:55:55 +0000

What I built

👨‍💻 Dev-Gym is a basic testing platform with a hacker-inspired design, created to help programmers hone their skills with AI-Powered hints.

Category Submission:

Best Project built using Supabase as the main data provider for the refine app.

App Link

https://dev-gym.vercel.app

Screenshots

Description

🕵️‍♂️ Hacker-Inspired Design: Dev-Gym sports a cool, hacker-inspired design to engage tech enthusiasts.

🤖 GPT-4 Assisted Tests: The coding tests in this prototype are pre-generated manually with the help of the advanced GPT-4 model.

💡 AI-Powered Hints: Dev-Gym integrates AI-driven hints during tests, offering real-time assistance

🔗 Supabase Integration: Dev-Gym is integrated with Supabase, where the data is stored.

📝 Admin Panel: The platform includes a panel where users can add new tests.

Link to Source Code

https://github.com/pavelee/dev-gym

Permissive License

MIT

Background (What made you decide to build this particular app? What inspired you?)

Fascinated by AI's transformative power in programmer education.
Looking for a positive site of AI

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

The most important, I gained knowledge how to use refine in practice.

Additionally I tried supabase and I like it!

Tech stack: Next.js, Antd UI, Supabase

What else:

Using Refine built-in integration with Supabase. Really cool!
- instant integration! wow!
- Utilizing Refine's hooks for data fetching. In my opinion it's the best part of the framework.
Admin panel built with generated code
- Firstly I was a little bit confused, but after tutorial it become clear.
- it really speed up CRUD job
- I love idea to copy and adjust code, a lot of flexibility
OpenAI integration for AI hints

Additional Resources/Info

Admin panel is located at path /admin

Stoa - forum app that use redis as a primary database

Paweł Ciosek — Sun, 28 Aug 2022 22:29:40 +0000

Overview of My Submission

Stoa is a small forum app. The inspiration is a need of minimalistic internal forum for organizations. Designed to look like a typical social media app.

The main purpose of the project is to test redis as main database. I am using redisJSON to store documents and RediSearch to perform searches.

Stack:

Typescript
Next.js
tailwindcss
Redis stack

Some thoughts from mine experience:

Advantages:

Easy to understand
Fast integration thanks to redis-om-node library. In dozen minutes, we are ready to start manipulating with documents.
We can storage several types of data, not only json.
RedisInsight app is really helpful during development process. Cool!

Disadvantages:

It's tricky when we want to build related data structure. We need to handle it by extending an entity class.
We have to create index on a collection, before starting to search anything. It's tricky for the first time.

Submission Category:

MEAN/MERN Mavericks

Language Used

JS/TS/Node.js

Link to Code

pavelee / stoa-redis-stack

Share your ideas among community

Stoa

Stoa is a small forum app. The inspiration is a need of minimalistic internal forum for organizations. Designed to look like a typical social media app.

The main purpose of the project is to test redis as main database. I am using redisJSON to store documents and RediSearch to perform searches.

Stack:

Typescript
Next.js
tailwindcss
Redis stack

How it works

How the data is stored:

Data is stored as documents using redisJSON

How the data is accessed:

Data is accesed through redis-om-node

How to run it locally?

You can run it loccaly using docker.

Prerequisites

Docker

Local installation

Run containers

docker-compose up -d

Acess app in the borwser

http://localhost:3000

More Information about Redis Stack

Here some resources to help you quickly get started using Redis Stack. If you still have questions, feel free to ask them in the Redis Discord or on Twitter.

Getting Started

View on GitHub

Additional Resources / Info

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

Boost your app accessibility with AI Speech Recognition (Deepgram)!

Paweł Ciosek — Sun, 10 Apr 2022 15:05:05 +0000

Overview of My Submission

The goal is to provide extra way to input value. It could be really helpful for people with disabilities, anyone that have problems with typing on a keyboard. You can fill any input using pointer and voice! Cool!

Submission Category:

Accessibility

Link to Code on GitHub

pavelee / react-deepgram-example

DEV hackathon project, usage of Deepgram AI Speech Recognition, boost your app accessibility

Boost your react app accessibility with AI Speech Recognition (Deepgram)!

What's that?

It's example of integration with Deepgram using react.

Deepgram?

Deepgram is external service to transcript speech from audio! (using AI, crazy stuff!)

Purpose

Purpose is to use speech transcription to improve an react app accessibility. We provide extra way to input value!

Help to provide input for people with disabilities
Speed up a form filling
Share expierience accross any device
- any device supporting modern browser
- react-native (mobile, TV, dekstop) as well!

Why?

Project was made as submission to DEV hackathlon, read more here

Post here: post

How it's working?

Project is built from two parts deepgram-proxy and deepgram-react

deepgram-proxy

We need some backend to upload audio file…

View on GitHub

Additional Resources / Info

I am using react as a frontend app.

It's important to remember that react frontend app is not necessary. You can integrate proxy with any other type of app. It's just REST API!

The process is pretty simple.

Display Deepgram component
Ask permission to microphone (browser)
Record your voice
Sending audio to proxy
Proxy ask Deepgram for transcription
Proxy responses with transcription, error or warring about no transcription (eg. user need to repeat louder)
User receives transcription and apply to input

Proxy from technical aspect.

It's node.js + express.js to handle API requests and communicate with Deepgram (using Deepgram SDK)

// endpoint to upload and transcript
app.post("/audiotranscript", upload.single("file"), async (req, res) => {
    let filepath = req.file.path
    let language = req.body.language;
    let transcript = await deepgramTranscript(deepgramApiKey, filepath, language);
    res.send({ transcript: transcript });
});

Fronted from technical aspect.

It's simple handler you pass proxy url and setter for your value.

I prepared two visualizations of usage. I am using antd design as component library.

Using wrapper that creates popover to any React component.

<DeepgramHandlerPopover
    setValue={setNotepadValue}
    proxyUploadUrl={proxyUploadUrl}
>
    <Input.TextArea
        rows={20}
        value={value}
        onChange={(ev) => {
            setValue(ev.target.value);
        }}
    />
</DeepgramHandlerPopover>

Using modal (small devices friendly)

<DeepgramHandlerModalButton
    setValue={setNotepadValue}
    proxyUploadUrl={proxyUploadUrl}
    buttonProps={{
        type: "primary",
    }}
/>

If you have other idea you can easy just wrap handler:

<MyCoolComponent>
    <DeepgramHandler
        setValue={setValue}
        proxyUploadUrl={proxyUploadUrl}
    />
</MyCoolComponent>

Final thoughts

I really appreciate what Deepgram has created. It is really well working, even with my unclear English. Amazing how tech industry improving our lives! <3

first post, don't open

Paweł Ciosek — Sun, 12 Jul 2020 21:07:13 +0000

first post, nothing interesting here.