Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v0.3.0 #59

Merged
merged 13 commits into from
Oct 26, 2024
Merged

v0.3.0 #59

merged 13 commits into from
Oct 26, 2024

Conversation

Dino-Kupinic
Copy link
Owner

@Dino-Kupinic Dino-Kupinic commented Oct 26, 2024

Summary by Sourcery

Update the FastAPI application to version 0.3.0 and introduce a new model router. Add a Nuxt 3 example application with chat components and a theme toggle feature. Include documentation for setting up and deploying the Nuxt 3 application.

New Features:

  • Introduce a new router for handling model-related endpoints in the FastAPI application.
  • Add a Nuxt 3 example application with components for chat functionality, including ChatHeader, ChatWindow, and SideNavigation.
  • Implement a theme toggle button in the Nuxt 3 example application.

Enhancements:

  • Update the FastAPI application version to 0.3.0.

Documentation:

  • Add a README file for the Nuxt 3 example application, providing setup and deployment instructions.

Copy link

sourcery-ai bot commented Oct 26, 2024

Reviewer's Guide by Sourcery

This PR implements version 0.3.0 of the application, introducing a new model router and a complete Nuxt.js web client implementation. The main changes include adding an endpoint to fetch available AI models and creating a full-featured chat interface with theme support.

Sequence diagram for fetching available models

sequenceDiagram
    participant Client
    participant NuxtApp
    participant ModelRouter
    participant TextModel
    participant ImageModel

    Client->>NuxtApp: Request /model
    NuxtApp->>ModelRouter: GET /model
    ModelRouter->>TextModel: Fetch text models
    ModelRouter->>ImageModel: Fetch image models
    TextModel-->>ModelRouter: Return text models
    ImageModel-->>ModelRouter: Return image models
    ModelRouter-->>NuxtApp: Return models
    NuxtApp-->>Client: Return models
Loading

Architecture diagram for the new model router integration

graph TD;
    A[FastAPI Application] -->|includes| B[Model Router];
    B -->|fetches| C[TextModel];
    B -->|fetches| D[ImageModel];
    E[Nuxt.js Client] -->|requests| B;
Loading

Class diagram for the new Model type

classDiagram
    class Model {
        +string name
        +string type
    }
    note for Model "Model type represents AI models with name and type attributes"
Loading

File-Level Changes

Change Details Files
Added a new model router to expose available AI models
  • Created endpoint to return available text and image models
  • Integrated model router into the main FastAPI application
  • Bumped version from 0.2.5 to 0.3.0
src/main.py
src/routers/model.py
Implemented chat interface components in Nuxt.js
  • Created ChatHeader component with model selection dropdown
  • Implemented ChatWindow component for message display and input
  • Added ChatMessage component for styling individual messages
  • Created useStream composable for handling message streaming
examples/web-nuxt/components/ui/chat/ChatHeader.vue
examples/web-nuxt/components/ui/chat/ChatWindow.vue
examples/web-nuxt/components/ui/chat/ChatMessage.vue
examples/web-nuxt/composables/useStream.ts
Added core Nuxt.js application structure and configuration
  • Set up Nuxt.js configuration with UI modules and TypeScript support
  • Implemented theme switching functionality
  • Created basic layout and navigation components
  • Added TypeScript types and configurations
examples/web-nuxt/nuxt.config.ts
examples/web-nuxt/app.config.ts
examples/web-nuxt/app.vue
examples/web-nuxt/layouts/default.vue
examples/web-nuxt/components/ui/ThemeButton.vue
examples/web-nuxt/components/ui/SideNavigation.vue
examples/web-nuxt/types/model.ts
examples/web-nuxt/tailwind.config.ts

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time. You can also use
    this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Dino-Kupinic - I've reviewed your changes and they look great!

Here's what I looked at during the review
  • 🟡 General issues: 2 issues found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

:maxrows="8"
size="md"
placeholder="Send a message"
@keyup.enter="sendMessage"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (performance): Consider debouncing the enter key handler to prevent rapid successive API calls

Implement debouncing to ensure a reasonable delay between API calls and prevent unnecessary server load.

        @keyup.enter="debounce(sendMessage, 300)"

})

if (response instanceof ReadableStream) {
const reader = response.getReader()
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (bug_risk): Add cleanup logic for the stream reader when component unmounts

Consider implementing an abort controller or cleanup function to properly close the stream reader when the component is destroyed to prevent memory leaks.

        const controller = new AbortController()
        const reader = response.getReader()
        onUnmounted(() => {
          reader.cancel()
          controller.abort()
        })

Comment on lines +22 to +38
if (response instanceof ReadableStream) {
const reader = response.getReader()
const decoder = new TextDecoder()

while (true) {
const { done, value } = await reader.read()
if (done) break
const chunk = decoder.decode(value)
data.value += chunk
}
} else {
if (typeof response === "string") {
data.value = response
} else {
console.error("Unexpected response type")
}
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Merge else clause's nested if statement into else if (merge-else-if)

Suggested change
if (response instanceof ReadableStream) {
const reader = response.getReader()
const decoder = new TextDecoder()
while (true) {
const { done, value } = await reader.read()
if (done) break
const chunk = decoder.decode(value)
data.value += chunk
}
} else {
if (typeof response === "string") {
data.value = response
} else {
console.error("Unexpected response type")
}
}
if (response instanceof ReadableStream) {
const reader = response.getReader()
const decoder = new TextDecoder()
while (true) {
const { done, value } = await reader.read()
if (done) break
const chunk = decoder.decode(value)
data.value += chunk
}
}
else if (typeof response === "string") {
data.value = response
}
else {
console.error("Unexpected response type")
}


ExplanationFlattening if statements nested within else clauses generates code that is
easier to read and expand upon.


while (true) {
const { done, value } = await reader.read()
if (done) break
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change
if (done) break
if (done) {


ExplanationIt is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

@Dino-Kupinic Dino-Kupinic merged commit 252cc5d into main Oct 26, 2024
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant