server.py.prompt.txt

claude-3-5-sonnet-20240620

You are Claude, an AI assistant powered by Anthropic's Claude-3.5-Sonnet model, specialized in backend development.
You are good at writing python webserver in single self-contained python files.

1. Regarding data or database.
If provide API key and mention API to use, generate client to actually connect to the API. (assume API is accesible and key is correct.)
Otherwise, generate mock data and prefer to use in-memory data-structure database.
When use sqlite, use local file database (in current directory).

2. You may use libraries like Flask, websocket and etc.
When use Flask, also enable CORS.

3. Bind to `localhost:8409`.

Output python source code should be included in <SERVER_PYTHON_CODE></SERVER_PYTHON_CODE> block.


=== 0: user ===
Generate "server.py". Backend design:
```

The backend will be a Python Flask server with the following key components:

1. File Upload Handling:
   - Use Flask's file upload functionality to receive the uploaded document.
   - Store the uploaded file temporarily on the server.

2. CrewAI Integration:
   - Set up a CrewAI agent using Claude 3.5 for document summarization.
   - Create a function to process the uploaded document and generate a summary using the CrewAI agent.

3. Markdown Conversion:
   - Implement a function to convert the summary into markdown format.

4. API Endpoints:
   - POST /upload: Handle file upload and trigger summarization process.
   - GET /summary: Return the generated markdown summary.
   - GET /download: Serve the markdown summary as a downloadable file.

5. Data Storage:
   - Use a simple in-memory storage (e.g., a dictionary) to store the latest summary for each session.

6. Error Handling:
   - Implement proper error handling for file upload issues, summarization failures, etc.

7. CORS Support:
   - Enable CORS to allow the frontend to communicate with the backend.

The server will use environment variables for API keys and other sensitive information.

```

=== 1: assistant ===
Here's a Python Flask server implementation based on your backend design requirements. This server.py file includes all the components you've specified, including file upload handling, CrewAI integration, markdown conversion, API endpoints, in-memory storage, error handling, and CORS support.

<SERVER_PYTHON_CODE>
import os
import tempfile
from flask import Flask, request, jsonify, send_file
from flask_cors import CORS
from werkzeug.utils import secure_filename
from crewai import Agent, Task, Crew
from langchain_anthropic import ChatAnthropic
import markdown

app = Flask(__name__)
CORS(app)

# In-memory storage for the latest summary
latest_summary = {}

# Load environment variables
ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
if not ANTHROPIC_API_KEY:
    raise ValueError("ANTHROPIC_API_KEY environment variable is not set")

# Initialize ChatAnthropic
chat_model = ChatAnthropic(model="claude-3-sonnet-20240229", anthropic_api_key=ANTHROPIC_API_KEY)

# Create CrewAI agent
summarizer_agent = Agent(
    role='Document Summarizer',
    goal='Provide concise and accurate summaries of documents',
    backstory='You are an expert in summarizing complex documents quickly and accurately.',
    allow_delegation=False,
    llm=chat_model
)

def summarize_document(file_path):
    with open(file_path, 'r') as file:
        content = file.read()

    summarize_task = Task(
        description=f"Summarize the following document:\n\n{content}\n\nProvide a concise summary that captures the main points and key information.",
        agent=summarizer_agent
    )

    crew = Crew(
        agents=[summarizer_agent],
        tasks=[summarize_task],
        verbose=True
    )

    result = crew.kickoff()
    return result

def convert_to_markdown(text):
    # For this example, we'll assume the text is already in a format close to markdown
    # You may need to add more sophisticated conversion logic depending on your needs
    return markdown.markdown(text)

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return jsonify({"error": "No file part"}), 400
    file = request.files['file']
    if file.filename == '':
        return jsonify({"error": "No selected file"}), 400
    if file:
        filename = secure_filename(file.filename)
        with tempfile.NamedTemporaryFile(delete=False) as temp_file:
            file.save(temp_file.name)
            try:
                summary = summarize_document(temp_file.name)
                markdown_summary = convert_to_markdown(summary)
                session_id = request.form.get('session_id', 'default')
                latest_summary[session_id] = markdown_summary
                return jsonify({"message": "File processed successfully"}), 200
            except Exception as e:
                return jsonify({"error": str(e)}), 500
            finally:
                os.unlink(temp_file.name)

@app.route('/summary', methods=['GET'])
def get_summary():
    session_id = request.args.get('session_id', 'default')
    summary = latest_summary.get(session_id)
    if summary:
        return jsonify({"summary": summary}), 200
    else:
        return jsonify({"error": "No summary available for this session"}), 404

@app.route('/download', methods=['GET'])
def download_summary():
    session_id = request.args.get('session_id', 'default')
    summary = latest_summary.get(session_id)
    if summary:
        with tempfile.NamedTemporaryFile(mode='w', delete=False, suffix='.md') as temp_file:
            temp_file.write(summary)
            temp_file_path = temp_file.name
        return send_file(temp_file_path, as_attachment=True, download_name='summary.md')
    else:
        return jsonify({"error": "No summary available for this session"}), 404

if __name__ == '__main__':
    app.run(host='localhost', port=8409, debug=True)
</SERVER_PYTHON_CODE>

This server.py file implements all the required components:

1. File Upload Handling: The /upload endpoint handles file uploads using Flask's request.files.

2. CrewAI Integration: The summarize_document function uses CrewAI with a Claude 3.5 agent to generate summaries.

3. Markdown Conversion: The convert_to_markdown function converts the summary to markdown format.

4. API Endpoints: 
   - POST /upload for file upload and summarization
   - GET /summary to retrieve the generated markdown summary
   - GET /download to download the summary as a markdown file

5. Data Storage: The latest_summary dictionary stores summaries in memory, keyed by session_id.

6. Error Handling: Various error checks and try-except blocks are implemented to handle potential issues.

7. CORS Support: CORS is enabled using the flask_cors extension.

The server uses environment variables for the Anthropic API key. Make sure to set the ANTHROPIC_API_KEY environment variable before running the server.

To run the server, save this code as server.py and execute it. The server will be available at http://localhost:8409. Remember to install the required dependencies (Flask, flask-cors, crewai, langchain_anthropic, markdown) before running the server.
=== 2: user ===
Generate "index.html" that connect to the server. The "index.html" design:
```

The frontend will be a single HTML page with embedded JavaScript and CSS. Key features include:

1. File Upload Section:
   - A drag-and-drop area for file upload.
   - A traditional file input button as an alternative.
   - Visual feedback during file upload process.

2. Summary Display:
   - A styled div to display the markdown summary.
   - Use a markdown rendering library (e.g., marked.js) to properly format the summary.

3. Download Button:
   - A button to download the summarized markdown file.

4. Progress Indicator:
   - A loading spinner or progress bar to show when summarization is in progress.

5. Responsive Design:
   - Use CSS media queries to ensure the page looks good on both desktop and mobile devices.

6. Error Messages:
   - A designated area to display any error messages from the backend.

7. Styling:
   - Use a modern, clean design with a color scheme that emphasizes readability.
   - Implement smooth transitions and animations for a polished user experience.

8. JavaScript Functionality:
   - Implement AJAX calls to communicate with the backend API.
   - Handle file upload, summary retrieval, and download functionality.
   - Dynamically update the UI based on the current state (uploading, processing, ready, error).

The HTML file will include all necessary CSS and JavaScript, making it a self-contained frontend solution.

```

=== 3: assistant ===
Certainly! I'll create an index.html file that connects to the server and implements the design you've described. First, let's review the existing code and plan our approach.

<CODE_REVIEW>
There is no existing index.html file to review. We'll be creating a new file from scratch based on the provided design requirements.
</CODE_REVIEW>

<PLANNING>
To create the index.html file, we'll follow this plan:

1. Set up the basic HTML structure with necessary meta tags and viewport settings.
2. Include external libraries:
   - Axios for AJAX requests
   - Marked.js for markdown rendering
   - A CSS reset or normalize.css for consistent styling across browsers
3. Create the main structure of the page with sections for file upload, summary display, and error messages.
4. Implement the drag-and-drop file upload area and traditional file input.
5. Add a progress indicator for the summarization process.
6. Create a styled area for displaying the markdown summary.
7. Add a download button for the summarized markdown file.
8. Implement responsive design using CSS media queries.
9. Add JavaScript functionality for handling file uploads, API communication, and UI updates.
10. Implement error handling and display.
11. Add styling with CSS, including transitions and animations for a polished look.
</PLANNING>

Now, let's create the index.html file based on this plan:

<INDEX_HTML_CODE>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Summarizer</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        /* CSS Reset */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .upload-area {
            border: 2px dashed #3498db;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .upload-area:hover {
            background-color: #e8f4fc;
        }

        .upload-area.dragover {
            background-color: #d5e9f7;
        }

        #file-input {
            display: none;
        }

        .btn {
            display: inline-block;
            background-color: #3498db;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        #progress-indicator {
            display: none;
            text-align: center;
            margin-top: 20px;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #summary-container {
            margin-top: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        #error-message {
            color: #e74c3c;
            text-align: center;
            margin-top: 20px;
        }

        @media (max-width: 600px) {
            body {
                padding: 10px;
            }

            .upload-area {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <h1>Document Summarizer</h1>
    <div class="upload-area" id="drop-area">
        <p>Drag and drop your file here or click to select</p>
        <input type="file" id="file-input" accept=".txt,.doc,.docx,.pdf">
        <button class="btn" onclick="document.getElementById('file-input').click()">Select File</button>
    </div>
    <div id="progress-indicator">
        <div class="spinner"></div>
        <p>Summarizing document...</p>
    </div>
    <div id="summary-container"></div>
    <div id="error-message"></div>

    <script>
        const dropArea = document.getElementById('drop-area');
        const fileInput = document.getElementById('file-input');
        const progressIndicator = document.getElementById('progress-indicator');
        const summaryContainer = document.getElementById('summary-container');
        const errorMessage = document.getElementById('error-message');

        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });

        function highlight() {
            dropArea.classList.add('dragover');
        }

        function unhighlight() {
            dropArea.classList.remove('dragover');
        }

        dropArea.addEventListener('drop', handleDrop, false);
        fileInput.addEventListener('change', handleFileSelect, false);

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            handleFiles(files);
        }

        function handleFileSelect(e) {
            const files = e.target.files;
            handleFiles(files);
        }

        function handleFiles(files) {
            if (files.length > 0) {
                uploadFile(files[0]);
            }
        }

        function uploadFile(file) {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('session_id', 'user_session_' + Date.now());

            progressIndicator.style.display = 'block';
            summaryContainer.innerHTML = '';
            errorMessage.textContent = '';

            axios.post('http://localhost:8409/upload', formData)
                .then(response => {
                    if (response.data.message === "File processed successfully") {
                        getSummary(formData.get('session_id'));
                    }
                })
                .catch(error => {
                    progressIndicator.style.display = 'none';
                    errorMessage.textContent = 'Error uploading file: ' + error.message;
                });
        }

        function getSummary(sessionId) {
            axios.get(`http://localhost:8409/summary?session_id=${sessionId}`)
                .then(response => {
                    progressIndicator.style.display = 'none';
                    const summary = response.data.summary;
                    summaryContainer.innerHTML = marked.parse(summary);
                    addDownloadButton(sessionId);
                })
                .catch(error => {
                    progressIndicator.style.display = 'none';
                    errorMessage.textContent = 'Error retrieving summary: ' + error.message;
                });
        }

        function addDownloadButton(sessionId) {
            const downloadBtn = document.createElement('button');
            downloadBtn.textContent = 'Download Summary';
            downloadBtn.className = 'btn';
            downloadBtn.style.marginTop = '20px';
            downloadBtn.onclick = () => downloadSummary(sessionId);
            summaryContainer.appendChild(downloadBtn);
        }

        function downloadSummary(sessionId) {
            window.location.href = `http://localhost:8409/download?session_id=${sessionId}`;
        }
    </script>
</body>
</html>
</INDEX_HTML_CODE>

This index.html file implements all the required features:

1. File Upload Section: Includes both a drag-and-drop area and a traditional file input button.
2. Summary Display: Uses marked.js to render the markdown summary.
3. Download Button: Appears after the summary is generated.
4. Progress Indicator: A spinner is shown during the summarization process.
5. Responsive Design: CSS media queries ensure the page looks good on both desktop and mobile devices.
6. Error Messages: Displayed in a designated area.
7. Styling: Modern and clean design with smooth transitions.
8. JavaScript Functionality: Handles file upload, summary retrieval, and download functionality using Axios for AJAX calls.

The HTML file includes all necessary CSS and JavaScript, making it a self-contained frontend solution that connects to the server running at localhost:8409.

<SECURITY_REVIEW>
1. File Upload: The server-side code (not shown here) should validate and sanitize the uploaded file to prevent potential security issues.
2. CORS: The frontend assumes CORS is enabled on the backend. Ensure that CORS is properly configured on the server to allow requests only from trusted origins.
3. Input Validation: The frontend doesn't perform extensive input validation. It's crucial that the backend thoroughly validates and sanitizes all input data.
4. Session Management: A simple session ID is generated client-side. For a production environment, implement proper server-side session management.
5. Error Handling: Error messages are displayed directly from the server. In a production environment, consider using generic error messages to avoid exposing sensitive information.
6. HTTPS: This example uses HTTP. In a production environment, always use HTTPS to encrypt data in transit.
</SECURITY_REVIEW>

To use this frontend:

1. Save the code as index.html in the same directory as your server.py file.
2. Ensure your server is running at localhost:8409.
3. Open the index.html file in a web browser.

The page should now be fully functional, allowing users to upload documents, view summaries, and download the results.
=== 4: user ===
Modify "server.py" to also serve "index.html" like a static web server.

=== Reply 0 ===
Certainly! I'll modify the server.py file to serve the index.html file as a static web page. This will allow users to access the frontend by simply visiting the root URL of the server. Here's the updated server.py code:

<SERVER_PYTHON_CODE>
import os
import tempfile
from flask import Flask, request, jsonify, send_file, send_from_directory
from flask_cors import CORS
from werkzeug.utils import secure_filename
from crewai import Agent, Task, Crew
from langchain_anthropic import ChatAnthropic
import markdown

app = Flask(__name__, static_folder='.')
CORS(app)

# In-memory storage for the latest summary
latest_summary = {}

# Load environment variables
ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
if not ANTHROPIC_API_KEY:
    raise ValueError("ANTHROPIC_API_KEY environment variable is not set")

# Initialize ChatAnthropic
chat_model = ChatAnthropic(model="claude-3-sonnet-20240229", anthropic_api_key=ANTHROPIC_API_KEY)

# Create CrewAI agent
summarizer_agent = Agent(
    role='Document Summarizer',
    goal='Provide concise and accurate summaries of documents',
    backstory='You are an expert in summarizing complex documents quickly and accurately.',
    allow_delegation=False,
    llm=chat_model
)

def summarize_document(file_path):
    with open(file_path, 'r') as file:
        content = file.read()

    summarize_task = Task(
        description=f"Summarize the following document:\n\n{content}\n\nProvide a concise summary that captures the main points and key information.",
        agent=summarizer_agent
    )

    crew = Crew(
        agents=[summarizer_agent],
        tasks=[summarize_task],
        verbose=True
    )

    result = crew.kickoff()
    return result

def convert_to_markdown(text):
    # For this example, we'll assume the text is already in a format close to markdown
    # You may need to add more sophisticated conversion logic depending on your needs
    return markdown.markdown(text)

@app.route('/')
def serve_index():
    return send_from_directory('.', 'index.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return jsonify({"error": "No file part"}), 400
    file = request.files['file']
    if file.filename == '':
        return jsonify({"error": "No selected file"}), 400
    if file:
        filename = secure_filename(file.filename)
        with tempfile.NamedTemporaryFile(delete=False) as temp_file:
            file.save(temp_file.name)
            try:
                summary = summarize_document(temp_file.name)
                markdown_summary = convert_to_markdown(summary)
                session_id = request.form.get('session_id', 'default')
                latest_summary[session_id] = markdown_summary
                return jsonify({"message": "File processed successfully"}), 200
            except Exception as e:
                return jsonify({"error": str(e)}), 500
            finally:
                os.unlink(temp_file.name)

@app.route('/summary', methods=['GET'])
def get_summary():
    session_id = request.args.get('session_id', 'default')
    summary = latest_summary.get(session_id)
    if summary:
        return jsonify({"summary": summary}), 200
    else:
        return jsonify({"error": "No summary available for this session"}), 404

@app.route('/download', methods=['GET'])
def download_summary():
    session_id = request.args.get('session_id', 'default')
    summary = latest_summary.get(session_id)
    if summary:
        with tempfile.NamedTemporaryFile(mode='w', delete=False, suffix='.md') as temp_file:
            temp_file.write(summary)
            temp_file_path = temp_file.name
        return send_file(temp_file_path, as_attachment=True, download_name='summary.md')
    else:
        return jsonify({"error": "No summary available for this session"}), 404

if __name__ == '__main__':
    app.run(host='localhost', port=8409, debug=True)
</SERVER_PYTHON_CODE>

Here are the key changes made to the server.py file:

1. Added static file serving:
   ```python
   app = Flask(__name__, static_folder='.')
   ```
   This tells Flask to serve static files from the current directory.

2. Added a new route to serve the index.html file:
   ```python
   @app.route('/')
   def serve_index():
       return send_from_directory('.', 'index.html')
   ```
   This route will serve the index.html file when users access the root URL of the server.

With these changes, the server will now serve the index.html file as a static web page. Users can access the frontend by navigating to `http://localhost:8409/` in their web browser.

To use this updated server:

1. Ensure that the index.html file is in the same directory as the server.py file.
2. Run the server.py file as before.
3. Open a web browser and navigate to `http://localhost:8409/`.

The frontend will now be served directly by the Flask server, and users can interact with the document summarization tool through their web browser.

This setup combines the backend and frontend into a single server, making it easier to deploy and manage. However, for production environments, you might want to consider using a dedicated web server like Nginx to serve static files and proxy requests to the Flask application for better performance and security.