|
| 1 | +# ODA Pro Styled |
| 2 | + |
| 3 | +🎥 **[View Demo Video](files/oda-pro-styled-demo.mp4)** |
| 4 | + |
| 5 | +A complete solution for creating professional, customizable chat interfaces for Oracle Digital Assistant with enterprise-grade speech recognition capabilities. |
| 6 | + |
| 7 | +## Overview |
| 8 | + |
| 9 | +ODA Pro Styled provides everything you need to deploy branded chat experiences that integrate seamlessly with Oracle Digital Assistant. Perfect for solution architects, sales teams, and developers who need to quickly showcase Oracle Digital Assistant across multiple client scenarios. |
| 10 | + |
| 11 | +**What's Included:** |
| 12 | + |
| 13 | +- **Frontend**: Modern React chat interface with multi-project theming |
| 14 | +- **Backend**: Oracle AI Speech Service integration for enhanced speech recognition |
| 15 | + |
| 16 | +## Key Features |
| 17 | + |
| 18 | +**🎨 Professional Showcase Capabilities** |
| 19 | + |
| 20 | +- Multi-project management (up to 8 branded configurations) |
| 21 | +- Instant theme switching for client demonstrations |
| 22 | +- Custom branding with logos, colors, and backgrounds |
| 23 | +- Lightning-fast project setup (under 30 seconds) |
| 24 | + |
| 25 | +**🎤 Enterprise Speech Integration** |
| 26 | + |
| 27 | +- Dual speech options: Browser native or Oracle AI Speech Service |
| 28 | +- **Multilingual Support**: 50+ languages including Spanish, French, German, Chinese, Japanese, Arabic, and more |
| 29 | +- Real-time speech-to-text with enterprise-grade accuracy |
| 30 | +- Automatic text-to-speech using Oracle Digital Assistant's TTS |
| 31 | +- Seamless voice conversation flow |
| 32 | + |
| 33 | +**💬 Rich Chat Experience** |
| 34 | + |
| 35 | +- Full markdown support for formatted responses |
| 36 | +- File attachment support (images and PDFs) |
| 37 | +- Real-time WebSocket communication |
| 38 | +- Responsive design across all devices |
| 39 | + |
| 40 | +**🔒 Privacy & Security** |
| 41 | + |
| 42 | +- Client data stored locally (localStorage) |
| 43 | +- No server dependencies for configuration data |
| 44 | +- Secure Oracle Cloud authentication |
| 45 | +- Complete client data isolation |
| 46 | + |
| 47 | +## Architecture |
| 48 | + |
| 49 | +The solution consists of two complementary components: |
| 50 | + |
| 51 | +### Frontend (React/Next.js) |
| 52 | + |
| 53 | +- Multi-tenant chat interface |
| 54 | +- Dynamic theming system |
| 55 | +- Oracle Digital Assistant WebSDK integration |
| 56 | +- Speech recognition interface |
| 57 | + |
| 58 | +### Backend (Node.js/Express) |
| 59 | + |
| 60 | +- Oracle AI Speech Service WebSocket proxy |
| 61 | +- **Multilingual speech recognition** (50+ languages via Whisper technology) |
| 62 | +- Real-time audio processing pipeline |
| 63 | +- FFmpeg audio format conversion |
| 64 | +- Secure Oracle Cloud authentication |
| 65 | + |
| 66 | +## Quick Start |
| 67 | + |
| 68 | +### Option 1: Frontend Only |
| 69 | + |
| 70 | +Basic setup with browser speech recognition: |
| 71 | + |
| 72 | +```bash |
| 73 | +cd files/frontend/ |
| 74 | +npm install |
| 75 | +cp .env.example .env.local |
| 76 | +# Configure your Oracle Digital Assistant credentials |
| 77 | +npm run dev |
| 78 | +``` |
| 79 | + |
| 80 | +### Option 2: Full Stack (Recommended) |
| 81 | + |
| 82 | +Complete setup with Oracle AI Speech Service: |
| 83 | + |
| 84 | +```bash |
| 85 | +# Start backend |
| 86 | +cd files/backend/ |
| 87 | +npm install |
| 88 | +cp .env.example .env |
| 89 | +# Configure Oracle Cloud credentials |
| 90 | +npm start |
| 91 | + |
| 92 | +# Start frontend (in new terminal) |
| 93 | +cd files/frontend/ |
| 94 | +npm install |
| 95 | +cp .env.example .env.local |
| 96 | +# Configure Oracle Digital Assistant + Speech Service URL |
| 97 | +npm run dev |
| 98 | +``` |
| 99 | + |
| 100 | +## Configuration |
| 101 | + |
| 102 | +### Oracle Digital Assistant Setup |
| 103 | + |
| 104 | +1. Create a Web channel in your Oracle Digital Assistant |
| 105 | +2. Note the Channel ID and URI |
| 106 | +3. Configure in frontend `.env.local` |
| 107 | + |
| 108 | +### Oracle AI Speech Service Setup (Optional) |
| 109 | + |
| 110 | +1. Enable AI Speech Service in Oracle Cloud Infrastructure |
| 111 | +2. Generate API credentials |
| 112 | +3. Configure in backend `.env` |
| 113 | + |
| 114 | +Detailed setup instructions are available in each component's README. |
| 115 | + |
| 116 | +## Use Cases |
| 117 | + |
| 118 | +**Sales Demonstrations** |
| 119 | + |
| 120 | +- Quickly switch between different client brand themes |
| 121 | +- Showcase Oracle Digital Assistant capabilities |
| 122 | +- Professional presentation-ready interface |
| 123 | + |
| 124 | +**Development & Testing** |
| 125 | + |
| 126 | +- Rapid prototyping with multiple configurations |
| 127 | +- A/B testing different chat experiences |
| 128 | +- Integration testing with Oracle services |
| 129 | + |
| 130 | +**Production Deployments** |
| 131 | + |
| 132 | +- Enterprise-ready speech recognition |
| 133 | +- Scalable WebSocket architecture |
| 134 | +- Secure credential management |
| 135 | + |
| 136 | +## Components |
| 137 | + |
| 138 | +- **Frontend**: [`files/frontend/`](files/frontend/) - Complete React chat interface |
| 139 | +- **Backend**: [`files/backend/`](files/backend/) - Oracle AI Speech Service integration |
| 140 | + |
| 141 | +## Technology Stack |
| 142 | + |
| 143 | +**Frontend**: Next.js 15, React 19, Material-UI, Framer Motion, Oracle WebSDK |
| 144 | +**Backend**: Node.js, Express, WebSocket, Oracle AI Speech SDK, FFmpeg |
| 145 | + |
| 146 | +## Browser Requirements |
| 147 | + |
| 148 | +- Modern browser with WebSocket support |
| 149 | +- Web Speech API (for browser speech mode) |
| 150 | +- LocalStorage for project persistence |
| 151 | + |
| 152 | +## License |
| 153 | + |
| 154 | +Copyright (c) 2025 Oracle and/or its affiliates. |
| 155 | + |
| 156 | +Licensed under the Universal Permissive License v1.0. |
0 commit comments