# 一个网页端MotifLogo图生成工具

**Repository Path**: jun-sun/MotifLogo

## Basic Information

- **Project Name**: 一个网页端MotifLogo图生成工具
- **Description**: Sequence Logo Generator
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-09
- **Last Updated**: 2026-02-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Sequence Logo Generator (Web Motif Tool)

![Sequence Logo Preview](https://placeholder.com/800x400?text=Sequence+Logo+Generator)

A web-based Sequence Logo generator that creates visual representations of sequence motifs from FASTA format data. This tool supports both DNA/RNA and protein sequences, with customizable visualization options and high-resolution export capabilities.

一个基于网页的Sequence Logo生成工具，可从FASTA格式数据创建序列基序的可视化图表。该工具支持DNA/RNA和蛋白质序列，提供可定制的可视化选项和高分辨率导出功能。

## Features / 功能特性

### Core Features / 核心功能
- **Dual Input Methods**: Upload FASTA files or paste sequence data directly
  - 双输入方式：上传FASTA文件或直接粘贴序列数据
- **Auto Sequence Detection**: Automatically identifies DNA/RNA or protein sequences
  - 自动序列检测：自动识别DNA/RNA或蛋白质序列
- **Two Visualization Modes**:
  - Bits mode (height represents conservation level)
  - Frequency mode (all columns have equal height)
  - 两种可视化模式：
    - Bits模式（高度代表保守性）
    - 频率模式（所有列高度相同）
- **Customizable Appearance**: Adjust column width, canvas size, and color schemes
  - 可定制外观：调整列宽、画布尺寸和颜色方案
- **High-Resolution Export**: Export logos as PNG files with 96/150/300/600 DPI options
  - 高分辨率导出：以96/150/300/600 DPI选项导出PNG格式Logo
- **Interactive Color Customization**: Modify nucleotide/amino acid colors in real-time
  - 交互式颜色定制：实时修改核苷酸/氨基酸颜色
- **Region Selection**: Focus on specific sequence regions (start/end positions)
  - 区域选择：聚焦特定序列区域（起始/结束位置）
- **Responsive Design**: Works on desktop and mobile devices
  - 响应式设计：支持桌面和移动设备

### Technical Features / 技术特性
- Pure HTML/CSS/JavaScript implementation (no server-side code)
  - 纯HTML/CSS/JavaScript实现（无服务器端代码）
- High-performance rendering with glyph caching
  - 带有字形缓存的高性能渲染
- Tailwind CSS for modern, clean UI
  - 使用Tailwind CSS构建现代简洁的UI
- Real-time preview of color changes
  - 颜色更改的实时预览
- Optimized for high-DPI displays
  - 针对高DPI显示器优化

## Getting Started / 快速开始

### Prerequisites / 前提条件
- Any modern web browser (Chrome, Firefox, Safari, Edge)
  - 任何现代网页浏览器（Chrome、Firefox、Safari、Edge）
- No installation required - works directly in the browser
  - 无需安装 - 直接在浏览器中运行

### Usage / 使用方法

#### Basic Usage / 基础使用
1. **Data Input / 数据输入**
   - **File Upload**: Click the file input to upload a FASTA file (.fasta, .fa, .txt)
     - 文件上传：点击文件输入框上传FASTA文件（.fasta, .fa, .txt）
   - **Text Input**: Paste FASTA-formatted sequences directly into the text area
     - 文本输入：将FASTA格式的序列直接粘贴到文本区域
   - Example format / 示例格式：
     ```
     >seq1
     ATGCCGTTAGACCGT
     >seq2
     ATGCCGATAGACCGT
     >seq3
     ATGGCGTCAGACTGT
     ```

2. **Generate Logo / 生成Logo**
   - Click the **"生成 Logo 图" / "Generate Logo"** button
   - 点击"生成 Logo 图"按钮
   - The tool will automatically detect sequence type (DNA/Protein) and render the logo
     - 工具会自动检测序列类型（DNA/蛋白质）并渲染Logo

3. **Export / 导出**
   - Select desired resolution (96/150/300/600 DPI) from the dropdown menu
     - 从下拉菜单选择所需分辨率（96/150/300/600 DPI）
   - Click **"下载 PNG" / "Download PNG"** to save the logo
     - 点击"下载 PNG"按钮保存Logo

#### Advanced Settings / 高级设置

1. **Visualization Mode / 可视化模式**
   - **Bits (信息量)**: Height of each position represents conservation level (default)
     - 每个位置的高度代表保守性水平（默认）
   - **Frequency (频率)**: All columns have equal height, showing relative frequencies
     - 所有列高度相同，显示相对频率

2. **Sequence Type / 序列类型**
   - **Auto Detect (自动检测)**: Default behavior, automatically identifies sequence type
     - 默认行为，自动识别序列类型
   - **DNA/RNA**: Force DNA/RNA mode
     - 强制使用DNA/RNA模式
   - **Protein**: Force protein mode
     - 强制使用蛋白质模式

3. **Dimensions / 尺寸设置**
   - **Column Width (列宽)**: Adjust width of each position column (20-200px)
     - 调整每个位置列的宽度（20-200像素）
   - **Canvas Height (画布高度)**: Adjust overall canvas height (200-1200px)
     - 调整画布总高度（200-1200像素）

4. **Region Selection / 区域选择**
   - **Start Position (起始位置)**: Set the first position to display (1-based)
     - 设置起始显示位置（从1开始计数）
   - **End Position (结束位置)**: Set the last position to display (0 = show all)
     - 设置结束显示位置（0 = 显示全部）

5. **Color Customization / 颜色定制**
   - Expand the **"自定义颜色 (Hex)" / "Custom Colors (Hex)"** section
     - 展开"自定义颜色 (Hex)"部分
   - Modify colors using either:
     - 使用以下方式修改颜色：
     - Color picker widget (click the color square)
       - 颜色选择器（点击颜色方块）
     - Hex code input (enter 6-digit hex value with #)
       - 十六进制代码输入（输入带#的6位十六进制值）
   - Click **"恢复默认颜色" / "Reset Colors"** to restore original color scheme
     - 点击"恢复默认颜色"恢复原始配色方案

#### Example Data / 示例数据
- Click **"加载示例数据" / "Load Example Data"** to test the tool with sample DNA sequences
  - 点击"加载示例数据"使用样本DNA序列测试工具

## Color Schemes / 配色方案

### Default DNA Colors / 默认DNA颜色
- A (Adenine): Green (#00CC00)
- C (Cytosine): Blue (#0000CC)
- G (Guanine): Orange/Yellow (#FFB300)
- T (Thymine): Red (#CC0000)
- U (Uracil): Red (#CC0000)
- N (Unknown): Gray (#808080)

### Default Protein Colors / 默认蛋白质颜色
- Green (#00CC00): G, S, T, Y, C, Q, N
- Blue (#0000CC): K, R, H
- Red (#CC0000): D, E
- Black (#000000): A, V, L, I, P, W, F, M

## Technical Details / 技术细节

### Implementation / 实现方式
- The tool uses HTML5 Canvas for rendering sequence logos
  - 工具使用HTML5 Canvas渲染序列Logo
- Glyph caching system optimizes rendering performance
  - 字形缓存系统优化渲染性能
- Window.devicePixelRatio handling ensures sharp rendering on high-DPI displays
  - Window.devicePixelRatio处理确保在高DPI显示器上的清晰渲染
- Tailwind CSS provides responsive, modern UI components
  - Tailwind CSS提供响应式、现代的UI组件

### Performance Considerations / 性能考量
- Glyph caching reduces canvas redraw time by reusing pre-rendered characters
  - 字形缓存通过重用预渲染字符减少画布重绘时间
- Real-time rendering updates only modified elements
  - 实时渲染仅更新修改的元素
- Efficient sequence parsing handles large FASTA files
  - 高效的序列解析可处理大型FASTA文件

## Troubleshooting / 故障排除

### Common Issues / 常见问题
1. **No Logo Displayed / 无Logo显示**
   - Check that input sequences are in valid FASTA format
     - 检查输入序列是否为有效的FASTA格式
   - Ensure sequences contain valid characters (A/T/C/G for DNA, standard amino acids for proteins)
     - 确保序列包含有效字符（DNA为A/T/C/G，蛋白质为标准氨基酸）
   - Verify that start/end positions are within sequence length
     - 验证起始/结束位置是否在序列长度范围内

2. **Incorrect Sequence Type / 序列类型错误**
   - Manually select sequence type (DNA/Protein) if auto-detection fails
     - 如果自动检测失败，手动选择序列类型（DNA/蛋白质）
   - Check for non-standard characters in sequences
     - 检查序列中的非标准字符

3. **Export Issues / 导出问题**
   - For very large logos, export may take a few seconds
     - 对于非常大的Logo，导出可能需要几秒钟
   - Ensure browser allows pop-ups/downloads from the page
     - 确保浏览器允许来自该页面的弹出窗口/下载

4. **Color Changes Not Visible / 颜色更改不可见**
   - Color changes require the logo to be already generated
     - 颜色更改需要Logo已生成
   - Click "Generate Logo" if color changes don't appear immediately
     - 如果颜色更改未立即显示，点击"生成Logo"

## Browser Compatibility / 浏览器兼容性
- Chrome 60+ ✅
- Firefox 55+ ✅
- Safari 12+ ✅
- Edge 79+ ✅
- Mobile Safari 12+ ✅
- Chrome for Android 60+ ✅

## License / 许可证
This project is released under the MIT License. See LICENSE file for details.
本项目基于MIT许可证发布。详见LICENSE文件。

## Acknowledgements / 致谢
- Sequence Logo concept by Schneider and Stephens (1990)
  - Sequence Logo概念由Schneider和Stephens于1990年提出
- Tailwind CSS for UI framework
  - 使用Tailwind CSS作为UI框架
- Font Awesome icons (via SVG)
  - 使用Font Awesome图标（通过SVG）

---

## 中文版本说明
本README文件提供中英文双语说明，其中：
- 英文内容在前，中文翻译在后，用`/`分隔
- 技术术语保留英文并提供中文翻译
- 操作说明同时提供中英文对照
- 适配中国用户的使用习惯和语言环境

## English Version Notes
This README file provides bilingual documentation (English/Chinese):
- English content appears first, followed by Chinese translation separated by `/`
- Technical terms retain English with Chinese translations
- Operational instructions include both English and Chinese
- Adapted for Chinese users' usage habits and language environment