diff --git a/.github/workflows/upload-draft.yml b/.github/workflows/upload-draft.yml new file mode 100644 index 0000000..19ce094 --- /dev/null +++ b/.github/workflows/upload-draft.yml @@ -0,0 +1,22 @@ +name: Upload draft +on: + push: + branches: + - main + +jobs: + upload-draft: + runs-on: ubuntu-latest + timeout-minutes: 5 + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + # Make sure the actual branch is checked out when running on pull requests + ref: ${{ github.head_ref }} + + - name: Upload Quest + uses: trywilco/uploadQuestAction@main + with: + quest-editor-user-token: ${{ secrets.QUESTS_EDITOR_TOKEN }} + quest-editor-user-email: your@email.address \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index 7b24931..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# tooljet-openai \ No newline at end of file diff --git a/assets/cover.jpeg b/assets/cover.jpeg new file mode 100644 index 0000000..08dd00b Binary files /dev/null and b/assets/cover.jpeg differ diff --git a/quest.yml b/quest.yml new file mode 100644 index 0000000..2ef9fcb --- /dev/null +++ b/quest.yml @@ -0,0 +1,30 @@ +id: tooljet_audio_transcriber +title: Build an Audio Transcriber with ToolJet +subtitle: Create an audio transcriber using ToolJet & OpenAI +description: >- + Unleash your inner maker as you build a functional and powerful audio + transcriber and analyzer using ToolJet and OpenAI. + + In this quest, you’ll follow a guided process to set up a no-code ToolJet application, integrate OpenAI for transcription, and enhance the app with analytical capabilities. + + You'll learn the essentials of ToolJet's visual app builder, how to connect APIs like OpenAI, and ways to process audio input for meaningful insights. + + By the end of this quest, you'll have your own custom-built audio transcriber and analyzer, ready to transform audio content into actionable data. Let’s get building! +level: intermediate +duration: 0.75 +skills: + - No-code development + - API integration + - OpenAI API usage + - Audio processing + - Application design +steps: + - introduction_tooljet_openai + - getting_started_tooljet + - setting_up_app + - integrating_openai + - upload_audio_files + - quiz_test_transcription + - reflect_on_learning +type: MODULE +repository: null diff --git a/steps/getting_started_tooljet.yml b/steps/getting_started_tooljet.yml new file mode 100644 index 0000000..2267963 --- /dev/null +++ b/steps/getting_started_tooljet.yml @@ -0,0 +1,27 @@ +id: getting_started_tooljet +learningObjectives: + - Familiarize yourself with the ToolJet platform and its interface. +hints: + - Check out ToolJet's documentation [here](https://docs.tooljet.com). +startFlow: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: ToolJet is a no-code development platform where you can drag and drop + components to build applications. + - text: Let’s start by visiting the [ToolJet dashboard](https://tooljet.com/). + - text: ToolJet’s key features include a visual builder, integrations with popular + APIs, and deployment tools. You can explore these features + in-depth [here](https://docs.tooljet.com/docs/components). + - text: Take a moment to explore the interface. Notice how easy it is to navigate + and find what you need. + - actionId: ready_message + params: + person: lucca +trigger: + type: user_ready_response + flowNode: + do: + - actionId: finish_step diff --git a/steps/integrating_openai.yml b/steps/integrating_openai.yml new file mode 100644 index 0000000..1994cda --- /dev/null +++ b/steps/integrating_openai.yml @@ -0,0 +1,29 @@ +id: integrating_openai +learningObjectives: + - Understand how to connect and use OpenAI APIs for transcription. +hints: + - Learn more about OpenAI APIs [here](https://platform.openai.com/docs/). +startFlow: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: Now, let’s integrate OpenAI. First, make sure you have an [OpenAI + account](https://platform.openai.com/signup/) and API key. + - text: In ToolJet, navigate to the API integrations section and add a new API. + You can learn how to configure APIs in ToolJet + [here](https://docs.tooljet.com/docs/apis). + - text: Enter the OpenAI endpoint URL from their [API + documentation](https://platform.openai.com/docs/api-reference/audio) + and paste your API key into the headers section. + - text: This will allow ToolJet to make calls to OpenAI’s transcription service. + Let’s configure it step-by-step. + - actionId: ready_message + params: + person: lucca +trigger: + type: user_ready_response + flowNode: + do: + - actionId: finish_step diff --git a/steps/introduction_tooljet_openai.yml b/steps/introduction_tooljet_openai.yml new file mode 100644 index 0000000..9ae6e90 --- /dev/null +++ b/steps/introduction_tooljet_openai.yml @@ -0,0 +1,34 @@ +id: introduction_tooljet_openai +learningObjectives: + - Learn about ToolJet and OpenAI and their capabilities. +hints: [] +startFlow: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: + Welcome to the quest! Today, we’ll explore how to build a no-code audio + transcriber and analyzer using [ToolJet](https://tooljet.com/) and + [OpenAI](https://platform.openai.com/docs/). + - text: + ToolJet is a fantastic no-code platform that lets you visually create apps + without writing much code. Check out ToolJet’s overview + [here](https://docs.tooljet.com/docs/overview). + - text: + OpenAI, on the other hand, provides powerful APIs for natural language + processing and transcription. Learn about OpenAI’s transcription + capabilities + [here](https://platform.openai.com/docs/api-reference/audio). + - text: + By combining these tools, you’ll create an app that turns audio into + actionable insights. Ready to dive in? + - actionId: ready_message + params: + person: lucca +trigger: + type: user_ready_response + flowNode: + do: + - actionId: finish_step diff --git a/steps/quiz_test_transcription.yml b/steps/quiz_test_transcription.yml new file mode 100644 index 0000000..cc740a0 --- /dev/null +++ b/steps/quiz_test_transcription.yml @@ -0,0 +1,56 @@ +id: quiz_test_transcription +learningObjectives: + - Ensure that the transcriber works as expected. +hints: + - Think about how the file upload interacts with OpenAI. +startFlow: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: What step triggers the transcription process in the app? + - actionId: quiz_message + name: quiz + params: + person: lucca + options: + - File upload triggers the transcription workflow. + - API key input starts transcription. + - User clicks a transcription button. +trigger: + type: chat_form_submitted + flowNode: + switch: + key: ${formSubmission} + cases: + A: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: Correct! The file upload component starts the transcription process. Great + job! + - actionId: finish_step + B: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: Not quite. The API key enables the connection but doesn’t start + transcription. + - actionId: replay_action + params: + actionName: quiz + C: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: Close, but we configured it to trigger after file upload. + - actionId: replay_action + params: + actionName: quiz diff --git a/steps/reflect_on_learning.yml b/steps/reflect_on_learning.yml new file mode 100644 index 0000000..aff0842 --- /dev/null +++ b/steps/reflect_on_learning.yml @@ -0,0 +1,98 @@ +id: reflect_on_learning +learningObjectives: + - Encourage users to reflect on their learning experience. +hints: + - Consider the parts where you needed to troubleshoot or configure settings. +startFlow: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: What was the most challenging part of building this app, and how did you + overcome it? +trigger: + type: user_message + params: + person: lucca + flowNode: + do: + - actionId: parse_user_response + name: user_answer + params: + prompt: " + + \ Please evaluate the user's answer in relation to the + expected answer: Responses may include challenges with API + integration, file uploads, or UI design.. + + \ # Assessment Criteria + + \ - Determine if the user's response demonstrates a + clear understanding of the key concepts and ideas presented in the + expected answer. + + \ - Consider synonyms, paraphrasing, and different + phrasing that convey the same meaning. + + \ - Be flexible and focus on the essence of the answer + rather than exact wording. + + + \ # Response Guidelines: + + \ - If the user's answer is correct or shows sufficient + understanding, return 'correct: true'. + + \ - Provide a positive and affirming message, + congratulating them and reinforcing their understanding. + + \ - If the user's answer is incorrect or incomplete, + return 'correct: false'. + + \ - Gently explain why the answer is not fully + correct or what may be missing. + + \ - Encourage them to try again, being empathetic and + supportive. + + + \ # Tone and Style: + + \ - Use friendly and encouraging language. + + \ - Be empathetic to the user's learning process. + + \ - Focus on helping the user learn and understand the + material. + + \ " + schema: + correct: boolean + reply: string + if: + conditions: + - conditionId: is_truthy + params: + value: ${outputs.user_answer.value.correct} + then: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: ${outputs.user_answer.value.reply} + - actionId: bot_message + params: + person: lucca + messages: + - text: Awesome work on completing this quest! Reflect on what you’ve learned and + think about where you can take these skills next. + - actionId: finish_step + else: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: ${outputs.user_answer.value.reply} diff --git a/steps/setting_up_app.yml b/steps/setting_up_app.yml new file mode 100644 index 0000000..a1025fb --- /dev/null +++ b/steps/setting_up_app.yml @@ -0,0 +1,27 @@ +id: setting_up_app +learningObjectives: + - Learn how to set up your ToolJet application for the project. +hints: + - Refer to the getting started guide in ToolJet’s docs for tips + [here](https://docs.tooljet.com/docs/getting-started). +startFlow: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: Time to create your app! Click on the 'Create App' button on the [ToolJet + dashboard](https://tooljet.com/). + - text: Name your app something meaningful, like 'Audio Transcriber'. + - text: Once your app is created, you’ll see the visual builder where you can add + components and configure settings. + - text: For now, just get familiar with this space. We’ll start adding + functionality soon. + - actionId: ready_message + params: + person: lucca +trigger: + type: user_ready_response + flowNode: + do: + - actionId: finish_step diff --git a/steps/upload_audio_files.yml b/steps/upload_audio_files.yml new file mode 100644 index 0000000..c365b3e --- /dev/null +++ b/steps/upload_audio_files.yml @@ -0,0 +1,27 @@ +id: upload_audio_files +learningObjectives: + - Learn how to enable file uploads and process audio inputs. +hints: + - ToolJet’s file upload documentation can help you + [here](https://docs.tooljet.com/docs/components/file-upload). +startFlow: + do: + - actionId: bot_message + params: + person: lucca + messages: + - text: To handle audio files, we’ll use ToolJet’s file upload component. + - text: Drag the upload widget into your app layout and configure it to accept + audio file types like .mp3 or .wav. Instructions can be found + [here](https://docs.tooljet.com/docs/components/file-upload). + - text: When a file is uploaded, ToolJet will trigger the configured workflow, + sending the file to OpenAI for transcription. + - text: Test the upload feature to ensure it works smoothly. + - actionId: ready_message + params: + person: lucca +trigger: + type: user_ready_response + flowNode: + do: + - actionId: finish_step