templates icon indicating copy to clipboard operation
templates copied to clipboard
verified publisher icon Mintbase

GFXvs Agent Plugin

Open johnagentify opened this issue 1 year ago • 8 comments

User description

Project Title: GFXvs AI Agent Plugin

Project Description: The GFXvs AI Agent Plugin facilitates the generation and upload of AI-generated art to the GFXvs Art Battle platform. Users can create unique images based on prompts, provide titles for their creations, and easily share their artworks with the community. The plugin streamlines the process of art submission, enhancing user engagement and creativity within the GFXvs ecosystem.

Technologies Used:

Node.js: The server-side runtime environment for building the API. NEAR Blockchain: For secure interactions and management of user data and artworks. OpenAI: Utilized for generating AI images based on user-defined prompts. mintbase.js: Employed for interacting with Mintbase services for NFT-related functionalities.

How did you use mintbase.js?

In the GFXvs AI Agent Plugin, mintbase.js is utilized to facilitate the interaction with the Mintbase API for uploading artworks as NFTs. This integration allows users to convert their generated art into NFTs seamlessly, ensuring that each piece is properly recorded on the blockchain. The plugin guides users through the process, making it user-friendly and efficient.

Working Demo Link

PR Type

Enhancement, Documentation

Description

  • Initial setup of Express server with routes and middleware.
  • Implemented art upload route with validation and API integration.
  • Added README with project details, key features, user flow, and deployment instructions.
  • Created package.json and package-lock.json with project metadata and dependencies.
  • Added OpenAPI specification for GFXvs API, defining endpoints and request/response schemas.

Changes walkthrough 📝

Relevant files
Enhancement
app.js
Initial setup of Express server with routes and middleware

gfxvs-ai-agent/app.js

  • Added Express server setup.
  • Configured routes for art upload and plugin JSON.
  • Included middleware for JSON parsing and static file serving.
    		•  +20/-0   
    artupload.js
    Implement art upload route with validation and API integration

    gfxvs-ai-agent/routes/artupload.js

  • Created route for handling art upload.
  • Included validation for required fields.
  • Integrated with external API for uploading art.
    		•  +27/-0   
    Documentation
    README.md
    Add README with project details and deployment instructions

    gfxvs-ai-agent/README.md

  • Added project introduction and key features.
  • Provided user flow and deployment instructions.
  • Included badges and author information.
    		•  +71/-0   
    ai-plugin.json
    Add OpenAPI specification for GFXvs API                                   

    gfxvs-ai-agent/public/.well-known/ai-plugin.json

  • Added OpenAPI specification for GFXvs API.
  • Defined endpoints and request/response schemas.
    		•  +128/-0 
    Dependencies
    package-lock.json
    Add package-lock.json with project dependencies                   

    gfxvs-ai-agent/package-lock.json

  • Added package-lock.json with dependencies.
  • Included versions for axios, express, and nodemon.
    		•  +1126/-0
    package.json
    Add package.json with project metadata and dependencies   

    gfxvs-ai-agent/package.json

  • Created package.json with project metadata.
  • Defined dependencies and scripts.
    		•  +18/-0   

    💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

    johnagentify avatar Sep 28 '24 12:09 johnagentify

    The latest updates on your projects. Learn more about Vercel for Git ↗︎

    Name Status Preview Comments Updated (UTC)
    templates ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 28, 2024 0:33am
    templates-blogchain ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 28, 2024 0:33am
    templates-coingecko-ai-plugin-simple ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 28, 2024 0:33am
    templates-contract-deployer ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 28, 2024 0:33am

    vercel[bot] avatar Sep 28 '24 12:09 vercel[bot]

    @Johnson-8844 is attempting to deploy a commit to the Mintbase Team on Vercel.

    A member of the Team first needs to authorize it.

    vercel[bot] avatar Sep 28 '24 12:09 vercel[bot]

    PR Reviewer Guide 🔍

    ⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Key issues to review

    Static File Path
    The middleware for serving static files uses 'public' as a string instead of a route path. It should be '/public' to correctly specify the path for static files.

    Error Handling
    The error handling in the catch block logs the error but does not specify the type of error. It's recommended to enhance the error message to provide more context about the failure.

    API Endpoint Hardcoding
    The API endpoint URL 'https://gfxvs.com/api/artupload' is hardcoded. Consider using environment variables or configuration files to manage such URLs, which makes the code more flexible and environment agnostic.

    mintbase-codium-pr-agent[bot] avatar Sep 28 '24 12:09 mintbase-codium-pr-agent[bot]

    PR Code Suggestions ✨

    CategorySuggestion                                                                                                                                    Score
    Security
    Sanitize input data to enhance security

    To improve security, consider sanitizing the input data to prevent injection attacks
    or other malicious input before using it in the axios POST request.

    gfxvs-ai-agent/routes/artupload.js [8]

    -const { colouredArt, arttitle, artistId } = req.body;
+const { colouredArt, arttitle, artistId } = sanitizeInput(req.body);
+// Implement sanitizeInput to clean the input data
    Suggestion importance[1-10]: 10

    Why: Sanitizing input data is crucial for security to prevent injection attacks and other malicious inputs. This suggestion addresses a major security concern and is highly important.

    		10
    Add regex pattern validation for 'artistId' to ensure data integrity

    To ensure data integrity and prevent potential security issues, consider adding
    validation for the 'artistId' to ensure it only contains valid characters and meets
    the expected format.

    gfxvs-ai-agent/public/.well-known/ai-plugin.json [48-50]

     "artistId": {
     "type": "string",
+    "pattern": "^[a-zA-Z0-9_.-]*$",
     "description": "User's account ID."
 }
    Suggestion importance[1-10]: 10

    Why: Adding validation for 'artistId' ensures that only valid characters are accepted, which is crucial for maintaining data integrity and preventing potential security issues.

    		10
    Best practice
    Replace hardcoded URLs with environment variables

    It's recommended to use environment variables for URLs to enhance security and
    flexibility in different environments rather than hardcoding them.

    gfxvs-ai-agent/public/.well-known/ai-plugin.json [10]

    -"url": "https://gfxvsaiagent-dvb6a2hnd4araccq.eastus-01.azurewebsites.net"
+"url": "${SERVER_URL}"
    Suggestion importance[1-10]: 9

    Why: Using environment variables for URLs enhances security and flexibility, making the code more adaptable to different environments.

    		9
    Use middleware for input validation to simplify and clean up the route handler

    Instead of manually checking each required field in the request body, consider using
    a middleware for validation like express-validator. This will make the code cleaner
    and more maintainable by separating the validation logic from the route handler.

    gfxvs-ai-agent/routes/artupload.js [10-11]

    -if (!colouredArt || !arttitle || !artistId) {
-    return res.status(400).json({ error: 'Missing required fields: colouredArt, arttitle, and artistId are required.' });
-}
+// Assuming express-validator is used and set up as middleware
+// The actual validation rules would be defined elsewhere in the middleware setup
    Suggestion importance[1-10]: 8

    Why: Using middleware for validation is a best practice that enhances code maintainability and readability by separating concerns. However, the suggestion lacks specific implementation details for the middleware setup.

    		8
    Enhancement
    Improve error handling by distinguishing between different types of errors

    Consider handling specific error types differently to provide more detailed feedback
    to the client, especially for common errors like network issues or invalid data.

    gfxvs-ai-agent/routes/artupload.js [22-23]

    -console.error("Error >> ", error);
-return res.status(500).json({ error: 'Internal Server Error' });
+if (error.response) {
+    // The request was made and the server responded with a status code
+    // that falls out of the range of 2xx
+    console.error("Server responded with non-2xx status: ", error.response.status);
+    return res.status(error.response.status).json({ error: error.response.data });
+} else if (error.request) {
+    // The request was made but no response was received
+    console.error("No response received: ", error.request);
+    return res.status(503).json({ error: 'Service Unavailable' });
+} else {
+    // Something happened in setting up the request that triggered an Error
+    console.error("Error setting up request: ", error.message);
+    return res.status(500).json({ error: 'Internal Server Error' });
+}
    Suggestion importance[1-10]: 9

    Why: This suggestion significantly improves error handling by providing more detailed feedback to the client and distinguishing between different types of errors. This enhances both debugging and user experience.

    		9
    Define error responses for various HTTP status codes to enhance API error handling

    To improve the API's usability and error handling, consider defining error response
    structures for different HTTP status codes, such as 400 or 500, to provide more
    detailed error information to the client.

    gfxvs-ai-agent/public/.well-known/ai-plugin.json [62-123]

     "200": {
-    "description": "Image data uploaded successfully.",
-    "content": {
-        "application/json": {
-            "schema": {
-                "type": "object",
-                "properties": {
-                    ...
-                }
-            }
-        }
-    }
+    "description": "Image data uploaded successfully."
+},
+"400": {
+    "description": "Bad Request. Check the request data."
+},
+"500": {
+    "description": "Internal Server Error. Please try again later."
 }
    Suggestion importance[1-10]: 8

    Why: Defining error responses for different HTTP status codes improves the API's usability and helps clients handle errors more effectively.

    		8
    Simplify object construction using ES6 shorthand syntax

    Use object shorthand in ES6 to simplify the object construction when making the POST
    request with axios.

    gfxvs-ai-agent/routes/artupload.js [15-17]

    -colouredArt: colouredArt,
-arttitle: arttitle,
-artistId: artistId
+colouredArt,
+arttitle,
+artistId
    Suggestion importance[1-10]: 7

    Why: The suggestion correctly identifies an opportunity to use ES6 shorthand syntax, which improves code readability and conciseness. This is a minor enhancement but still valuable.

    		7
    Maintainability
    Simplify and structure the 'instructions' field for better readability and understanding

    To ensure the API documentation is clear and concise, consider simplifying the
    'instructions' field by breaking it into smaller, more manageable parts and using
    simpler language.

    gfxvs-ai-agent/public/.well-known/ai-plugin.json [18]

    -"instructions": "First, ask the user to provide a prompt for generating the image. After the image is generated, ask the user for a title for the image. Once the title is collected, upload the generated image to the /api/artupload endpoint on the GFXvs platform, along with the colouredArt (the generated image), arttitle (the title provided by the user), and artistId (the user's account ID). After the image is successfully uploaded, display the URL with the text like Share your creation with friends and community for upvotes, get featured in the daily art battle, and win amazing prizes! for the user to share their uploaded art to friends: https://gfxvs.com/?artId={_id} (replace {_id} with the _id from the API response). Guide the user throughout the process to ensure all information is provided correctly and the image is uploaded successfully. Note: Ensure all steps have the line break for clear visibility and all the questions you asked is in the bold and the initial process steps should be in bullet points for more visibility. Ensure the displaying URL should be in bold."
+"instructions": [
+    "1. Prompt the user for an image generation idea.",
+    "2. After image generation, request an image title from the user.",
+    "3. Upload the image to /api/artupload with the necessary details.",
+    "4. Display a shareable URL for the uploaded art and guide the user to share it."
+]
    Suggestion importance[1-10]: 7

    Why: Simplifying and structuring the 'instructions' field improves readability and maintainability, making it easier for users to follow the steps.

    		7

    mintbase-codium-pr-agent[bot] avatar Sep 28 '24 12:09 mintbase-codium-pr-agent[bot]

    Can you register the agent? I can't properly test this via https://wallet.bitte.ai/smart-actions/prompt/hey%20what%20can%20you%20do%20for%20me?mode=debug&agentid=gfxvsaiagent-dvb6a2hnd4araccq.eastus-01.azurewebsites.net

    microchipgnu avatar Oct 09 '24 12:10 microchipgnu

    Can you register the agent? I can't properly test this via https://wallet.bitte.ai/smart-actions/prompt/hey%20what%20can%20you%20do%20for%20me?mode=debug&agentid=gfxvsaiagent-dvb6a2hnd4araccq.eastus-01.azurewebsites.net

    did you actually check the link in the description? here it is - https://wallet.bitte.ai/smart-actions/Yehier5WJWcQ7vPXK-ZTb?mode=debug&agentId=gfxvs.com please try it and let me know if there is any issue

    johnagentify avatar Oct 09 '24 13:10 johnagentify

    Can you register the agent? I can't properly test this via https://wallet.bitte.ai/smart-actions/prompt/hey%20what%20can%20you%20do%20for%20me?mode=debug&agentid=gfxvsaiagent-dvb6a2hnd4araccq.eastus-01.azurewebsites.net

    did you actually check the link in the description? here it is - https://wallet.bitte.ai/smart-actions/Yehier5WJWcQ7vPXK-ZTb?mode=debug&agentId=gfxvs.com please try it and let me know if there is any issue

    No, I used directly from your manifest. It seems the the OpenAPI spec includes the wrong url

    microchipgnu avatar Oct 09 '24 13:10 microchipgnu

    Hmmm, unable to test this, I see the spec is hosted but the tools didn't work for me.

    image

    This works for me, but sometimes the AI sends requests to our API with incorrect fields, causing the API to return an error message. Do you have any suggestions on how we could address or solve this issue?

    Here’s the working chat link: https://wallet.bitte.ai/smart-actions/share/c-EJG7N2nf3Gy8Ejv6a9O

    Johnson-8844 avatar Nov 07 '24 06:11 Johnson-8844