Alph4Centauri/email-summerization-ui

📧 Email Summarizer Office Add-in Frontend

This is the frontend component of the Email Summarizer Office Add-in. It serves the static files (HTML, JavaScript, CSS) that make up the user interface for the Outlook add-in.

🏗️ Architecture

This is part of a two-space architecture:

1. 1.Frontend Space (This Space) - Serves Office add-in UI files
2. 2.taskpane.html - Main UI
3. 3.taskpane.js - Business logic
4. 4.manifest.xml - Office add-in configuration
5. 5.Runs on CPU basic (free tier)

1. 1.Backend Space - AI summarization API
2. 2.Flask API with BART model
3. 3.Handles email/attachment processing
4. 4.Requires GPU tier for model inference

🔧 Configuration Required

1. Update Backend URL

Edit taskpane.js and replace:

API_BASE_URL: 'https://alph4Centauri-email-summarization-api.hf.space'

With your actual backend space URL.

2. Update Manifest URLs

Edit manifest.xml and replace all instances of:

https://marco31-EmailParserUI.hf.space
https://alph4Centauri-email-summarization-api.hf.space

With your actual space URLs.

📱 Office Add-in Installation

Development Installation

1. 1.Download the manifest.xml file from this space
2. 2.In Outlook, go to Get Add-ins → My Add-ins → Custom Add-ins
3. 3.Choose Add from file and upload the manifest.xml
4. 4.The add-in will appear in Outlook's ribbon

Production Installation

1. 1.Upload manifest.xml to your organization's add-in catalog
2. 2.Deploy through Microsoft 365 admin center
3. 3.Users will see it in their Outlook automatically

🌐 Files Served

🔐 CORS & Security

The nginx configuration includes:

• —CORS headers for Office domains
• —Security headers (X-Frame-Options, etc.)
• —Proper MIME types for Office files
• —Gzip compression

🧪 Testing Your Frontend

1. Check Files Load

• —Visit https://marco31-EmailParserUI.hf.space/taskpane.html
• —Should show the Email Summarizer interface

2. Check Manifest

• —Visit https://marco31-EmailParserUI.hf.space/manifest.xml
• —Should download the XML file

3. Test in Outlook

• —Install the add-in using the manifest
• —Open an email and click the "Summarize" button
• —Should show your task pane

🚨 Common Issues

Frontend Won't Load

• —Check that all URLs in manifest.xml are correct
• —Ensure this space is Running status
• —Verify nginx configuration is correct

Add-in Won't Install

• —Check manifest.xml syntax with Office Add-in Validator
• —Ensure all URLs in manifest are HTTPS
• —Verify the add-in ID is unique

Can't Connect to Backend

• —Update API_BASE_URL in taskpane.js
• —Check backend space is running
• —Verify CORS settings allow frontend domain

📈 Monitoring

Check these endpoints to verify everything works:

• —https://marco31-EmailParserUI.hf.space/taskpane.html - UI loads
• —https://marco31-EmailParserUI.hf.space/manifest.xml - Manifest downloads
• —Backend health: https://marco31-EmailParserUI.hf.space/health - API status

🔄 Updates

To update the frontend:

1. 1.Edit the files in this space
2. 2.Frontend will auto-update (no Office restart needed)
3. 3.Users may need to refresh their task pane

To update the backend:

1. 1.Update backend space separately
2. 2.No frontend changes needed (unless API changes)

💡 Cost Optimization

This frontend space can run on:

• —CPU basic (free) - Perfect for static file serving
• —No GPU needed
• —Minimal resource usage

Total cost = Backend space cost only!

🔗 Related Links

• —[Backend Space]() - Add your backend space URL here
• —Office Add-ins Documentation
• —Hugging Face Spaces Guide

📞 Support

For issues:

1. 1.Check browser console for JavaScript errors
2. 2.Verify all URLs are correct in manifest.xml and taskpane.js
3. 3.Test backend API directly via health endpoint
4. 4.Check Office add-in logs in Outlook

Ready to use! Just update the URLs and install the manifest in Outlook.