Skip to content

thisisdineth/Counselling-Genrating-website-with-AI-technology

Repository files navigation

GiveMeCounseling.AI is a web application that leverages AI technology to provide personalized counseling and advice. Users can enter their concerns, and the application generates tailored responses using the AI/ML API.

Features

  • Personalized Counseling: Get tailored advice and guidance based on user input.
  • AI Integration: Uses AI models to generate responses and offer support.
  • User Interaction: Simple and intuitive user interface for interacting with the AI.
  • Email Subscription: Option to subscribe for updates and notifications.
  • Multi-language Support: Translation support through Google Translate.

Technologies Used

  • HTML/CSS: For web page structure and styling.
  • JavaScript: For handling API requests and dynamic content updates.
  • Fetch API: To communicate with the AI/ML API.
  • Google Translate API: To offer language translation options.

Setup

  1. Clone the Repository:

    git clone https://github.com/yourusername/givemecounseling-ai.git
    cd givemecounseling-ai
  2. Update API Key and Model:

    • Open index.html and replace the apiKey and baseURL values with your actual API key and base URL.
  3. Open the Web Page:

    • Open index.html in a web browser to view and interact with the application.

Usage

  1. Enter Concerns:

    • Type your concerns or questions into the input box in the "How can we help you?" section.
  2. Generate Counseling:

    • Click the "Generate Counseling" button to receive advice and guidance from the AI.
  3. Subscribe for Updates:

    • Enter your email address in the subscription box and click "Subscribe" to receive updates.
  4. View Responses:

    • AI-generated responses will be displayed in the "From US" section.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GiveMeCounseling.AI</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>GiveMeCounseling.AI</h1>
        <p>Get personalized counseling using AI technology.</p>
    </header>

    <section id="problem">
        <textarea id="userInput" rows="4" cols="50" placeholder="HOW CAN WE HELP YOU :) ..."></textarea>
        <button id="generateBtn">Generate Counseling</button>
    </section>

    <section id="counseling">
        <div id="counselingOutput"></div>
    </section>

    <footer>
        <input type="email" id="emailInput" placeholder="Enter your email">
        <button id="subscribeButton">Subscribe</button>
        <div id="google_translate_element"></div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

API Integration

API Key

Replace my_key with your API key in the JavaScript code.

API Request

The application makes POST requests to the AI/ML API with the following payload:

const response = await fetch('https://api.aimlapi.com/v1/chat/completions', {
    method: 'POST',
    headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        model: 'mistralai/Mistral-7B-Instruct-v0.2',
        messages: [
            { role: 'system', content: systemPrompt },
            { role: 'user', content: userPrompt }
        ],
        temperature: 0.7,
        max_tokens: 256
    })
});

Contributing

Feel free to contribute by submitting issues or pull requests to the GitHub repository.

License

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

Acknowledgements

  • OpenAI for providing the AI/ML API.
  • Google Translate for multi-language support.
  • You for using and supporting the project!

About

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors