License

This project is licensed under the Custom License - see the LICENSE file for details.

Attribution

Please attribute this project to @fadingbeat when using the code.

Angular Netlify Application with TiDB Cloud and Emotion Analysis

This README file provides an overview of how the application is built using Angular and deployed on Netlify. The application utilizes TiDB Cloud service for database management and integrates Emotion Analysis and OpenAI APIs for enhanced functionality.

Table of Contents

• Introduction
• Technologies Used
• Application Structure
• Deployment on Netlify
• TiDB Cloud Integration
• Emotion Analysis with OpenAI

Introduction

This web application is built using Angular, a popular front-end framework, to provide a user-friendly interface for various functionalities. The application utilizes TiDB Cloud for managing the database, ensuring scalability, and high performance. Additionally, the application integrates Emotion Analysis and OpenAI API to perform sentiment analysis on user-provided content.

Technologies Used

• Angular: A powerful front-end framework for building single-page applications.
• Netlify: A cloud platform for continuous deployment and hosting of web applications.
• TiDB Cloud: A cloud-based, distributed SQL database service for high-performance data management.
• OpenAI API: An API service for natural language processing and emotion analysis.

Application Structure

The application is structured in the following way:

• src/
  • app/
    • components/
      • text-to-emotion/
        • text-to-emotion.component.ts
        • text-to-emotion.component.html
        • text-to-emotion.component.css
      • your-colors/
        • your-colors.component.ts
        • your-colors.component.html
        • your-colors.component.css
        • color-shape/
          • color-shape.component.ts
          • color-shape.component.html
          • color-shape.component.css
      • your-visualization/
        • your-visualization.component.ts
        • your-visualization.component.html
        • your-visualization.component.css
    • core/
      • header/
        • header.component.ts
        • header.component.html
        • header.component.css
      • footer/
        • footer.component.ts
        • footer.component.html
        • footer.component.css
      • error-handler/
        • error-handler.service.ts
        • error.interceptor.ts
        • error.model.ts
      • auth.guard.ts
      • user.guard.ts
      • core.module.ts
    • models/
      • emotion.model.ts
      • color.model.ts
      • shape.model.ts
      • visualization.model.ts
    • services/
      • emotion-analysis.service.ts
      • colors.service.ts
      • visualization.service.ts
    • shared/
      • shared.module.ts
      • common/
        • spinner/
          • spinner.component.ts
          • spinner.component.html
          • spinner.component.css
        • ... (other common components, directives, and pipes)
    • app.module.ts
    • app-routing.module.ts
    • app.component.ts
    • app.component.html
    • app.component.css
  • assets/
  • index.html
  • ...

The main app folder contains components, services, and models used in the application. Components define different sections of the app, such as the home page and emotion analysis feature.

Deployment on Netlify

The application can be deployed on Netlify for easy hosting and continuous deployment. Netlify can be configured to automatically deploy changes whenever a new commit is made to the repository.

1. Sign up for a Netlify account if you haven't already.
2. Connect the repository to your Netlify account.
3. Configure the build settings to build the Angular app.
4. Netlify will automatically deploy the application whenever new changes are pushed to the main branch.

TiDB Cloud Integration

TiDB Cloud is used as the backend database service for this application. It provides a cloud-based distributed SQL database that offers scalability, high availability, and strong consistency.

To integrate TiDB Cloud with the application:

1. Sign up for a TiDB Cloud account and create a new database instance.
2. Obtain the necessary credentials (username, password, host) to connect to the TiDB Cloud database.
3. In the Angular app, use the tidb.service.ts to connect to the TiDB Cloud instance and perform database operations.

Emotion Analysis with OpenAI

The application leverages the OpenAI API and Emotion Analysis API for detecting emotions on user-provided content, and connecting related color to emotion. The Emotion Analysis component interacts with the API service to determine the sentiment of the input text.

To use the OpenAI API features:

1. Sign up for an OpenAI account and obtain an API key.
2. Use the openai.service.ts to make API requests to the OpenAI service.
3. The emotion.model.ts defines the data model for the emotions returned from the OpenAI API.

Ensure to handle API rate limits, authentication, and any potential errors when using the OpenAI service.

Note: Please make sure to handle any sensitive information, such as API keys, securely and follow best practices for secure API usage.

This documentation should provide an overview of how the Angular Netlify application is built, integrated with TiDB Cloud and OpenAI APIs for Emotion Analysis. For further development and improvements, refer to the codebase and relevant documentation for each technology used. Happy coding!