Files
Z.AI-Chat-for-Android/README.md

700 lines
26 KiB
Markdown

<div align="center">
# Z.AI Chat for Android
**Full-stack AI chat client for the Z.AI GLM Coding Plan**
Native Android app with Chat, Coding, Brainstorm & Agentic modes.
<br />
[![Download APK](https://img.shields.io/badge/Download-APK-violet?style=for-the-badge&logo=android&logoColor=white)](https://github.rommark.dev/admin/Z.AI-Chat-for-Android/releases)
[![Android 15/16](https://img.shields.io/badge/Android-15%2F16-green?style=for-the-badge&logo=android&logoColor=white)](https://developer.android.com)
[![API: GLM-5.1](https://img.shields.io/badge/API-GLM--5.1-blue?style=for-the-badge)](https://docs.z.ai)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow?style=for-the-badge)](LICENSE)
<br />
<table>
<tr>
<td align="center"><b>Dark Mode</b></td>
<td align="center"><b>Light Mode</b></td>
</tr>
<tr>
<td>
<img src="https://img.shields.io/badge/Screenshot-Dark_Mode-1a1a2e?style=for-the-badge" />
</td>
<td>
<img src="https://img.shields.io/badge/Screenshot-Light_Mode-f5f5fa?style=for-the-badge&labelColor=d8dae6&color=f5f5fa" />
</td>
</tr>
</table>
<br />
---
### Get 10% OFF your Z.AI Coding Plan
[![Z.AI Coding Plan - 10% OFF](https://img.shields.io/badge/Z.AI_Coding_Plan-10%25_OFF-Save_Now-violet?style=for-the-badge&logo=zapier&logoColor=white&labelColor=6c63ff&color=7f78ff)](https://z.ai/subscribe?ic=ROK78RJKNW)
> World-class GLM-5.1 models for coding agents. Monthly access from just $18/mo.
> Use the link above for an exclusive **10% discount** on your subscription.
---
</div>
---
## Table of Contents
- [Overview](#overview)
- [Architecture](#architecture)
- [Technology Stack](#technology-stack)
- [Features](#features)
- [Design System](#design-system)
- [Development Process](#development-process)
- [Project Structure](#project-structure)
- [Building from Source](#building-from-source)
- [Configuration](#configuration)
- [API Reference](#api-reference)
- [Changelog](#changelog)
- [License](#license)
---
## Overview
Z.AI Chat for Android is a self-contained, production-ready Android application that connects to the **Z.AI GLM Coding Plan** API. It provides four specialized AI interaction modes — general Chat, Coding assistant, Brainstorm partner, and autonomous Agentic coding — all accessible from a single native Android app.
The app targets **Android 15 (API 35) and Android 16 (API 36)**, built with Capacitor for the hybrid architecture, wrapping a performant single-page web application inside a native Android WebView.
### Key Differentiators
| Feature | Implementation |
|---------|---------------|
| **Zero-config start** | Enter your Z.AI coding plan token and start chatting immediately |
| **4 Specialized Modes** | Each mode has a tailored system prompt optimized for its use case |
| **Real-time Streaming** | Server-Sent Events (SSE) for token-by-token response rendering |
| **Dark & Light Themes** | Full theme system with 30+ CSS custom properties per palette |
| **Conversation Management** | Multi-conversation sidebar with auto-titling and JSON export |
| **Markdown + Code** | Full GFM markdown with syntax highlighting and copy buttons |
| **940 KB Release APK** | Minified, shrunk, ProGuard-optimized, self-signed |
---
## Architecture
### High-Level Architecture
```
┌─────────────────────────────────────────────────────┐
│ Android APK │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ Capacitor Shell │ │
│ │ ┌─────────────┐ ┌────────────────────────┐ │ │
│ │ │ MainActivity│ │ WebView (Chrome-based) │ │ │
│ │ │ (Java) │──│ │ │ │
│ │ └─────────────┘ │ ┌──────────────────┐ │ │ │
│ │ │ │ SPA (HTML/CSS/JS)│ │ │ │
│ │ ┌─────────────┐ │ │ │ │ │ │
│ │ │ Capacitor │ │ │ ┌────────────┐ │ │ │ │
│ │ │ Bridge │◄─┤ │ │ Chat UI │ │ │ │ │
│ │ └─────────────┘ │ │ │ (Vue-like) │ │ │ │ │
│ │ │ │ └────────────┘ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ ┌────────────┐ │ │ │ │
│ │ │ │ │ API Layer │ │ │ │ │
│ │ │ │ │ (fetch) │ │ │ │ │
│ │ │ │ └──────┬─────┘ │ │ │ │
│ │ │ └─────────┼────────┘ │ │ │
│ │ └────────────┼────────────┘ │ │
│ └───────────────────────────────┼────────────────┘ │
│ │ HTTPS │
└──────────────────────────────────┼────────────────────┘
┌──────────────▼──────────────┐
│ Z.AI Coding Plan API │
│ api.z.ai/api/coding/paas/v4 │
│ │
│ OpenAI-compatible endpoint │
│ Models: GLM-5.1, GLM-5, │
│ GLM-4.7, GLM-4.5-air │
└─────────────────────────────┘
```
### Component Architecture
```
www/
├── index.html ← Entry point, all screens defined
├── css/styles.css ← 30+ CSS custom properties, dual theme system
└── js/
├── app.js ← Core application logic (state machine, API, UI)
├── marked.min.js ← Markdown parser (GFM compatible)
└── highlight.min.js← Syntax highlighting for 180+ languages
```
The app uses a **state-machine pattern** with three screens:
1. **Setup Screen** — API key entry, endpoint selection, mode overview
2. **Chat Screen** — Message history, mode selector, input area, sidebar
3. **Settings Screen** — API config, model tuning, theme, data management, changelog
### Data Flow
```
User Input → State Manager → API Request Builder → fetch() → Z.AI API
User Sees ← Markdown Renderer ← SSE Parser ← Stream Response ◄┘
└→ Syntax Highlighter → Code Headers (Copy button)
```
### State Management
All state is persisted in `localStorage` with the `zai_chat_` prefix:
```javascript
state = {
apiKey, // Bearer token for Z.AI API
baseUrl, // API endpoint (coding plan vs general)
model, // GLM model selection
temperature, // 0.0 - 1.0 randomness control
maxTokens, // 256 - 16384 response length
streaming, // SSE toggle
webSearch, // web_search tool toggle
currentMode, // chat | coding | brainstorm | agentic
theme, // dark | light
conversations[], // Full message history
activeConversationId
}
```
---
## Technology Stack
### Frontend (WebView SPA)
| Technology | Version | Purpose |
|-----------|---------|---------|
| **HTML5** | Living Standard | Semantic markup, meta viewport, PWA-ready |
| **CSS3** | Custom Properties, Grid, Flexbox | Dual-theme design system with 30+ variables |
| **Vanilla JavaScript** | ES2020 (IIFE pattern) | Zero-dependency state management, async/await |
| **Marked.js** | Latest | GitHub-Flavored Markdown parsing |
| **Highlight.js** | 11.9.0 | Syntax highlighting for 180+ programming languages |
### Android Native Layer
| Technology | Version | Purpose |
|-----------|---------|---------|
| **Capacitor** | 8.3.4 | Hybrid app framework, WebView bridge |
| **Android SDK** | API 36 | Targeting Android 16 (Baklava) |
| **Gradle** | 8.14.3 | Build automation |
| **Android Gradle Plugin** | 8.13.0 | Compilation, resource processing |
| **JDK** | 21 | Java compilation |
| **ProGuard** | Android Optimize | Release APK minification and shrinking |
### API Integration
| Protocol | Implementation |
|----------|---------------|
| **OpenAI Chat Completions** | POST `/chat/completions` with Bearer auth |
| **Server-Sent Events (SSE)** | `stream: true` with `ReadableStream` parsing |
| **Web Search** | Tool calling via `web_search` tool type |
### Build & Signing
| Component | Details |
|-----------|---------|
| **Debug Keystore** | `debug.keystore``android` / `androiddebugkey` |
| **Release Keystore** | `release.keystore``zaichat` / `zai-chat` |
| **RSA Key Size** | 2048-bit |
| **Validity** | 10,000 days |
---
## Features
### 1. Four Specialized Chat Modes
Each mode injects a purpose-built system prompt:
| Mode | System Prompt Strategy | Use Case |
|------|----------------------|----------|
| **Chat** | Concise, knowledgeable assistant | General Q&A, explanations |
| **Coding** | Expert coder; markdown code blocks, edge cases, error handling | Code generation, debugging |
| **Brainstorm** | Creative partner; diverse ideas, trade-off evaluation | Ideation, planning |
| **Agentic** | Autonomous agent; step-by-step tasks, tool-calling format | Complex multi-step coding |
### 2. Real-Time Streaming
- Uses `fetch()` with `ReadableStream` for SSE parsing
- Token-by-token rendering with Markdown re-parsing on each chunk
- Abort support via `AbortController` — stop generation at any time
### 3. Dark & Light Theme System
```
30+ CSS Custom Properties per Theme
├── Backgrounds (7 levels: primary → code)
├── Text (3 levels: primary → muted)
├── Accent (main, hover, dim)
├── Borders
├── Status colors (danger, success, warning)
└── UI chrome (shadows, overlays, scrollbars)
```
Theme is toggled via:
- **Header button** — sun/moon icon, instant toggle
- **Settings toggle** — Dark Mode switch
- **Persisted** — `localStorage` survives app restarts
### 4. Conversation Management
- Unlimited conversations stored in `localStorage`
- Auto-titling from first message (first 50 chars)
- Sidebar with conversation list, active indicator, swipe-to-delete
- JSON export for backup/migration
### 5. Markdown & Code Rendering
- Full **GitHub-Flavored Markdown** (tables, task lists, strikethrough)
- **Syntax highlighting** for 180+ languages via Highlight.js
- **Code block headers** with language label and copy button
- Inline code with distinct styling
### 6. Network Security
- `network_security_config.xml` whitelists only Z.AI domains
- HTTPS-only communication
- `android:usesCleartextTraffic="false"`
---
## Design System
### Color Palette
#### Dark Theme (Default)
| Token | Hex | Usage |
|-------|-----|-------|
| `--bg-primary` | `#0f0f23` | Main background |
| `--bg-secondary` | `#1a1a2e` | Headers, cards |
| `--bg-tertiary` | `#16213e` | Tertiary surfaces |
| `--accent` | `#6c63ff` | Primary brand color |
| `--text-primary` | `#e0e0ff` | Main text |
| `--border` | `#2a2a4a` | Dividers |
#### Light Theme
| Token | Hex | Usage |
|-------|-----|-------|
| `--bg-primary` | `#f5f5fa` | Main background |
| `--bg-secondary` | `#ffffff` | Headers, cards |
| `--bg-tertiary` | `#eef0f6` | Tertiary surfaces |
| `--accent` | `#6c63ff` | Primary brand color (shared) |
| `--text-primary` | `#1a1a2e` | Main text |
| `--border` | `#d8dae6` | Dividers |
### Typography
- **Font Stack**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- **Base Size**: 15px
- **Code Font**: `'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace`
- **Code Size**: 13px
### Spacing & Sizing
| Token | Value | Usage |
|-------|-------|-------|
| `--radius` | 16px | Message bubbles, cards |
| `--radius-sm` | 10px | Buttons, inputs |
| `--transition` | 0.2s ease | All interactive elements |
---
## Development Process
This project was built end-to-end using a systematic **Plan → Code → Test → Iterate** workflow powered by the Z.AI GLM-5.1 model itself (meta: the tool that built this app is powered by the same API it targets).
### Phase 1: Research & Planning
**Objective**: Understand the Z.AI API surface and design the app architecture.
1. **API Research**: Fetched and analyzed the [z-ai-sdk-python](https://github.com/zai-org/z-ai-sdk-python) repository to understand:
- Authentication flow (Bearer token)
- Endpoint structure (OpenAI-compatible `/chat/completions`)
- Streaming protocol (SSE with `data:` lines)
- Available models and their capabilities
- Tool calling format (web search)
2. **Endpoint Discovery**: Discovered from [Z.AI docs](https://docs.z.ai) that the **Coding Plan** uses a dedicated endpoint:
- Coding Plan: `https://api.z.ai/api/coding/paas/v4`
- General API: `https://api.z.ai/api/paas/v4`
- This distinction was critical — using the wrong endpoint would not consume the coding plan quota.
3. **Architecture Decision**: Chose **Capacitor** (over Cordova/React Native) because:
- Zero-framework frontend (vanilla JS) for minimal APK size
- Direct access to native Android WebView
- Smaller learning curve for a single-developer project
- Production-ready Android project scaffolding
### Phase 2: Frontend Development
**Objective**: Build the complete web application (HTML/CSS/JS).
#### Step 1: HTML Structure (index.html)
- Designed three-screen layout: Setup → Chat → Settings
- Semantic HTML with proper ARIA considerations
- Mode selector, sidebar, conversation list
- Theme toggle integration
#### Step 2: CSS Design System (styles.css)
- Started with CSS Custom Properties for theming
- Built component library: buttons, inputs, toggles, cards
- Implemented responsive layout (mobile-first)
- Added animations: `fadeIn` for messages, `bounce` for thinking dots, `spin` for loaders
#### Step 3: JavaScript Application (app.js)
- **IIFE pattern** to avoid global scope pollution
- **State machine** with localStorage persistence
- **API layer**:
- `apiRequest()` for non-streaming calls
- `streamResponse()` with `ReadableStream` + `TextDecoder` for SSE
- `AbortController` for cancellation support
- **Markdown pipeline**: `marked.parse()``hljs.highlight()` → DOM injection
- **Theme engine**: `data-theme` attribute switching with CSS custom properties
#### Step 4: Theme System (v1.2.0)
- Extended `:root` variables into dual theme blocks
- `[data-theme="light"]` override block with 30+ light-palette values
- Added `applyTheme()` function that:
- Sets `data-theme` on `<html>`
- Updates meta `theme-color` for browser chrome
- Toggles header button icon (sun/moon)
- Syncs settings toggle
- Persists to localStorage
### Phase 3: Android Build Pipeline
**Objective**: Create a signed, optimized APK.
#### Step 1: Environment Setup
- Downloaded **JDK 21** (required by Capacitor 8.x — JDK 17 fails with `invalid source release: 21`)
- Downloaded **Android SDK Command-Line Tools** (146 MB)
- Installed SDK components: `platforms;android-36`, `build-tools;36.0.0`, `platform-tools`
#### Step 2: Project Scaffolding
- `npm init` → Capacitor initialization
- `npx cap add android` — generates full Android project
- Customized `AndroidManifest.xml` with network security config
- Added `network_security_config.xml` for domain whitelisting
#### Step 3: Build Configuration
- Created debug and release keystores with `keytool`
- Configured `signingConfigs` in `app/build.gradle`
- Enabled ProGuard minification + resource shrinking for release
- Set Java 17 compatibility
#### Step 4: Build & Sign
```bash
./gradlew assembleRelease --no-daemon # → 940 KB release APK
./gradlew assembleDebug --no-daemon # → 4.0 MB debug APK
```
### Phase 4: Testing & Validation
| Test | Method | Result |
|------|--------|--------|
| APK install | Manual (Android 15 emulator) | Pass |
| API connection | `testConnection()` with real key | Pass |
| Streaming | SSE parsing with real API | Pass |
| Theme persistence | Kill/restart app | Pass |
| Conversation save | Kill/restart app | Pass |
| Multi-conversation | Create/switch/delete | Pass |
| Code rendering | Python, JS, Go code blocks | Pass |
| Copy button | Clipboard API | Pass |
| Export | JSON file download | Pass |
| Light mode contrast | Visual inspection | Pass |
| ProGuard release | 940 KB (77% size reduction) | Pass |
---
## Project Structure
```
zai-chat/
├── www/ # Web application (SPA)
│ ├── index.html # Entry point with all 3 screens
│ ├── css/
│ │ └── styles.css # Full design system + dual themes
│ └── js/
│ ├── app.js # Core application logic
│ ├── marked.min.js # Markdown parser
│ └── highlight.min.js # Syntax highlighter
├── android/ # Native Android project
│ ├── app/
│ │ ├── build.gradle # App-level build config + signing
│ │ ├── proguard-rules.pro # ProGuard keep rules
│ │ ├── debug.keystore # Debug signing key
│ │ ├── release.keystore # Release signing key
│ │ └── src/main/
│ │ ├── AndroidManifest.xml # Permissions, activities, config
│ │ ├── assets/public/ # WebView assets (copied from www/)
│ │ └── res/
│ │ ├── xml/
│ │ │ └── network_security_config.xml
│ │ ├── values/
│ │ │ ├── strings.xml
│ │ │ ├── colors.xml
│ │ │ └── styles.xml
│ │ └── mipmap-*/ # App icons
│ ├── build.gradle # Root build config
│ ├── variables.gradle # SDK version constants
│ ├── settings.gradle # Module includes
│ └── gradle/wrapper/ # Gradle wrapper
├── capacitor.config.json # Capacitor configuration
├── package.json # NPM dependencies
└── README.md # This file
```
---
## Building from Source
### Prerequisites
| Requirement | Version |
|-------------|---------|
| **Node.js** | 18+ |
| **JDK** | 21 |
| **Android SDK** | Platform 36, Build-Tools 36.0.0 |
| **npm** | 9+ |
### Quick Build
```bash
# Clone the repository
git clone https://github.rommark.dev/admin/Z.AI-Chat-for-Android.git
cd Z.AI-Chat-for-Android/zai-chat
# Install dependencies
npm install
# Sync web assets to Android
npx cap sync android
# Build debug APK
cd android && ./gradlew assembleDebug
# Build release APK (signed)
./gradlew assembleRelease
# APKs will be at:
# android/app/build/outputs/apk/debug/app-debug.apk
# android/app/build/outputs/apk/release/app-release.apk
```
### Environment Setup (from scratch)
```bash
# 1. Install JDK 21
curl -fsSL "https://download.java.net/java/GA/jdk21.0.2/f2283984656d49d69e91c558476027ac/13/GPL/openjdk-21.0.2_linux-x64_bin.tar.gz" | tar xz -C /opt/
export JAVA_HOME=/opt/jdk-21.0.2
# 2. Install Android SDK
mkdir -p ~/android-sdk/cmdline-tools
curl -fsSL "https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip" -o /tmp/cmdline-tools.zip
unzip /tmp/cmdline-tools.zip -d ~/android-sdk/cmdline-tools/
mv ~/android-sdk/cmdline-tools/cmdline-tools ~/android-sdk/cmdline-tools/latest
# 3. Install SDK components
export ANDROID_HOME=~/android-sdk
yes | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager \
--sdk_root=$ANDROID_HOME \
"platforms;android-36" "build-tools;36.0.0" "platform-tools"
# 4. Set environment
export PATH=$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/cmdline-tools/latest/bin:$PATH
```
---
## Configuration
### API Endpoints
| Name | URL | Purpose |
|------|-----|---------|
| **Coding Plan** | `https://api.z.ai/api/coding/paas/v4` | GLM Coding Plan subscription |
| **General API** | `https://api.z.ai/api/paas/v4` | Pay-per-use API |
| **China** | `https://open.bigmodel.cn/api/paas/v4` | Zhipu AI (mainland China) |
### Available Models
| Model | Description | Recommended For |
|-------|-------------|----------------|
| `glm-5.1` | Flagship foundation model | Complex coding, agentic tasks |
| `glm-5-turbo` | Faster variant | Quick queries |
| `glm-4.7` | Previous generation | General purpose |
| `glm-4.5-air` | Lightweight, fast | Speed-critical tasks |
| `glm-5v-turbo` | Vision model | Image understanding |
### System Prompts
<details>
<summary>Chat Mode</summary>
```
You are a helpful, knowledgeable AI assistant. Be concise and accurate.
```
</details>
<details>
<summary>Coding Mode</summary>
```
You are an expert coding assistant. Write clean, efficient, well-documented code.
Always use markdown code blocks with language tags. Explain your approach briefly
before and after code. Handle edge cases and errors properly.
```
</details>
<details>
<summary>Brainstorm Mode</summary>
```
You are a creative brainstorming partner. Generate diverse ideas, explore
unconventional angles, build on concepts, and help evaluate trade-offs. Think
freely and expansively. Present ideas in organized lists or tables when appropriate.
```
</details>
<details>
<summary>Agentic Mode</summary>
```
You are an autonomous coding agent. Break down complex tasks into clear steps.
Write production-quality code with proper error handling, tests, and documentation.
Think through the architecture before coding. Use tool-calling format when appropriate:
[SEARCH], [CREATE_FILE], [EDIT_FILE], [RUN_COMMAND]. Always verify your work.
```
</details>
---
## API Reference
### POST `/chat/completions`
**Request:**
```json
{
"model": "glm-5.1",
"messages": [
{"role": "system", "content": "..."},
{"role": "user", "content": "..."},
{"role": "assistant", "content": "..."}
],
"temperature": 0.7,
"max_tokens": 4096,
"stream": true,
"tools": [{"type": "web_search", "web_search": {"search_query": "...", "search_result": true}}]
}
```
**Streaming Response (SSE):**
```
data: {"choices":[{"delta":{"content":"Hello"},"index":0}]}
data: {"choices":[{"delta":{"content":" world"},"index":0}]}
data: [DONE]
```
**Non-Streaming Response:**
```json
{
"choices": [{
"message": {"role": "assistant", "content": "Hello world"},
"finish_reason": "stop"
}]
}
```
---
## Changelog
### v1.2.3 (2026-05-19)
- Fixed: Connect button not working — missing `updateSendButton()` function declaration caused JS parse error
- All UI event handlers now correctly initialized on app start
### v1.2.2 (2026-05-19)
- Fixed: network error on app backgrounding — now auto-retries with reconnect
- Streaming resumes from last saved token after reconnection (context preserved)
- Exponential backoff retry (3 attempts) for network interruptions
- Retry button shown for failed requests due to connectivity loss
- Offline/online detection with status banner
- Visibility change handler saves state on app going to background
- Partial response preserved and restorable on reconnect
### v1.2.1 (2026-05-19)
- Fixed: messages lost when switching conversations during streaming generation
- Streaming responses auto-save every 20 tokens to prevent data loss
- Partial responses preserved when switching sessions mid-generation
- Added in-app terminal panel for Coding and Agentic modes
- Terminal parses code blocks, file operations, and tool calls from AI responses
- Terminal toggle button with collapsible panel (persists state)
- Conversation list now shows message count per session
- Improved conversation switch safety with flush-before-switch pattern
### v1.2.0 (2026-05-19)
- Added light mode / dark mode toggle
- Theme persists across sessions via localStorage
- Theme toggle button (sun/moon) in chat header
- Theme setting in Settings > Appearance
- Added changelog section to Settings
- Optimized light theme color palette with 30+ CSS variables
- Android `theme-color` meta updates on theme switch
### v1.1.0 (2026-05-19)
- Z.AI Coding Plan endpoint support (`api.z.ai/api/coding/paas/v4`)
- Fixed default API base URL to use coding plan endpoint
- Updated model list: GLM-5.1, GLM-5 Turbo, GLM-4.7, GLM-4.5 Air, GLM-5V Turbo
- Added coding plan subscription links to setup screen
### v1.0.0 (2026-05-19)
- Initial release
- 4 chat modes: Chat, Coding, Brainstorm, Agentic
- Real-time SSE streaming responses
- Markdown rendering with syntax highlighting (180+ languages)
- Code block headers with copy buttons
- Multi-conversation management with sidebar
- Settings: model, temperature, max tokens, web search, streaming
- Conversation export to JSON
- Android 15/16 support (targetSdk 36, compileSdk 36)
- Dark theme with Material Design 3 aesthetics
- Self-signed release APK (940 KB)
---
## License
This project is licensed under the **MIT License** — see the [LICENSE](LICENSE) file for details.
---
<div align="center">
**Built with [Z.AI GLM-5.1](https://docs.z.ai) &middot; Powered by [Z.AI Coding Plan](https://z.ai/subscribe?ic=ROK78RJKNW)**
[![Z.AI Coding Plan](https://img.shields.io/badge/Get_10%25_OFF-Z.AI_Coding_Plan-violet?style=for-the-badge&logo=zapier&logoColor=white&labelColor=6c63ff&color=7f78ff)](https://z.ai/subscribe?ic=ROK78RJKNW)
</div>