Skip to content

A
ai-box
Commit fc56331a authored by fisherdaddy's avatar fisherdaddy
Browse files
Options

Initial commit

parents
Show whitespace changes
Inline Side-by-side
Showing with 814 additions and 0 deletions
.gitignore 0 → 100644
View file @ fc56331a
node_modules/
package-lock.json
\ No newline at end of file
README.md 0 → 100644
View file @ fc56331a
# AI Toolbox
AI 工具箱是一个集成多种人工智能工具的Web应用程序,旨在为用户提供一站式AI解决方案。该项目由 [AI 编辑器 Cursor](https://fisherdaddy.com/posts/cursor-the-ai-code-editor/) 提供支持。
## 功能特性
- 文字转图片卡片：将文本转换为精美的图片卡片
- JSON格式化工具：美化和验证JSON数据
- 多语言支持：支持中文和英文界面切换
- 响应式设计：适配各种设备屏幕尺寸
## 快速开始
### 前置要求
- Node.js (版本 14.0.0 或更高)
- npm (版本 6.0.0 或更高)
### 安装
1. 克隆仓库
```bash
git clone https://github.com/your-username/ai-toolbox.git
cd ai-toolbox
```
2. 安装依赖
```bash
npm install
```
3. 启动开发服务器
```bash
npm run dev
```
4. 在浏览器中打开 `http://localhost:3000` 查看应用
## 使用方法
1. 文字转图片卡片
- 导航到 "文字卡片" 工具
- 在左侧输入框中输入文本
- 右侧实时预览生成的图片卡片
- 点击 "导出为图片" 下载生成的图片
2. JSON格式化工具
- 导航到 "JSON 格式化" 工具
- 在左侧输入框中粘贴JSON数据
- 右侧自动显示格式化后的JSON结构
## 技术栈
- React
- React Router
- Styled Components
- Vite
\ No newline at end of file
index.html 0 → 100644
View file @ fc56331a
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="AI工具箱 - 您的智能助手集合" />
<title>AI工具箱 | 智能助手集合</title>
<link rel="stylesheet" href="/src/styles/main.css" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
package.json 0 → 100644
View file @ fc56331a
{
"name": "ai-toolbox",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"html2canvas": "^1.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.26.2",
"styled-components": "^6.1.13"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.0.0",
"vite": "^4.3.9"
}
}
src/App.jsx 0 → 100644
View file @ fc56331a
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import JsonFormatter from './components/JsonFormatter';
import Header from './components/Header';
import Footer from './components/Footer';
import TextToImage from './components/TextToImage';
function App(op) {
return (
<div className="app-container">
<Header />
<div className="content-wrapper">
<main>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/text2image" element={<TextToImage />} />
<Route path="/json-formatter" element={<JsonFormatter />} />
</Routes>
</main>
</div>
<Footer />
</div>
);
}
export default App;
src/components/Footer.jsx 0 → 100644
View file @ fc56331a
import React from 'react';
function Footer() {
return (
<footer>
<p>&copy; 2024 AI工具箱. 保留所有权利。</p>
</footer>
);
}
export default Footer;
\ No newline at end of file
src/components/Header.jsx 0 → 100644
View file @ fc56331a
import React from 'react';
import { Link } from 'react-router-dom';
import LanguageSelector from './LanguageSelector';
import { useTranslation } from '../js/i18n';
import '../styles/Header.css'; // 确保创建并导入这个CSS文件
function Header() {
const { t } = useTranslation();
return (
<header>
<nav>
<Link to="/" className="logo no-underline">
{t('title')}
</Link>
<LanguageSelector />
</nav>
</header>
);
}
export default Header;
\ No newline at end of file
src/components/JsonFormatter.jsx 0 → 100644
View file @ fc56331a
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
const Container = styled.div`
padding: 20px;
max-width: 1200px;
margin: 0 auto;
font-family: 'Arial', sans-serif;
`;
const Title = styled.h2`
color: #333;
margin-bottom: 20px;
`;
const FlexContainer = styled.div`
display: flex;
gap: 20px;
`;
const TextArea = styled.textarea`
width: 100%;
height: 400px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
`;
const JsonContainer = styled.div`
flex: 1;
overflow: auto;
height: 400px;
background-color: #f8f8f8;
padding: 10px;
border-radius: 4px;
`;
const ToggleButton = styled.span`
cursor: pointer;
color: #666;
font-weight: bold;
margin-right: 5px;
`;
const Key = styled.span`
color: #881391;
`;
const Value = styled.span`
color: #1a1aa6;
`;
const JsonList = styled.ul`
list-style-type: none;
padding-left: 20px;
margin: 0;
`;
function JsonFormatter() {
const [input, setInput] = useState('');
const [parsedJson, setParsedJson] = useState(null);
useEffect(() => {
try {
const parsed = JSON.parse(input);
setParsedJson(parsed);
} catch (error) {
setParsedJson(null);
}
}, [input]);
return (
<Container>
<Title>JSON格式化工具</Title>
<FlexContainer>
<div style={{ flex: 1 }}>
<TextArea
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="输入JSON数据"
/>
</div>
<JsonContainer>
{parsedJson ? (
<JsonView data={parsedJson} />
) : (
<pre>Invalid JSON</pre>
)}
</JsonContainer>
</FlexContainer>
</Container>
);
}
function JsonView({ data }) {
const [isExpanded, setIsExpanded] = useState(true);
if (Array.isArray(data)) {
return (
<div>
<ToggleButton onClick={() => setIsExpanded(!isExpanded)}>
{isExpanded ? '[-]' : '[+]'}
</ToggleButton>
{!isExpanded && <span>Array</span>}
{isExpanded && (
<JsonList>
{data.map((item, index) => (
<li key={index}>
<JsonView data={item} />
</li>
))}
</JsonList>
)}
</div>
);
} else if (typeof data === 'object' && data !== null) {
return (
<div>
<ToggleButton onClick={() => setIsExpanded(!isExpanded)}>
{isExpanded ? '{-}' : '{+}'}
</ToggleButton>
{!isExpanded && <span>Object</span>}
{isExpanded && (
<JsonList>
{Object.entries(data).map(([key, value]) => (
<li key={key}>
<Key>"{key}"</Key>: <JsonView data={value} />
</li>
))}
</JsonList>
)}
</div>
);
} else if (typeof data === 'string') {
return <Value>"{data}"</Value>;
} else {
return <Value>{JSON.stringify(data)}</Value>;
}
}
export default JsonFormatter;
src/components/LanguageSelector.jsx 0 → 100644
View file @ fc56331a
import React from 'react';
import { useTranslation } from '../js/i18n';
function LanguageSelector() {
const { lang, setLanguage } = useTranslation();
const handleLanguageChange = (e) => {
setLanguage(e.target.value);
};
return (
<div id="language-selector">
<select id="lang-select" value={lang} onChange={handleLanguageChange}>
<option value="zh">中文</option>
<option value="en">English</option>
</select>
</div>
);
}
export default LanguageSelector;
\ No newline at end of file
src/components/TextToImage.jsx 0 → 100644
View file @ fc56331a
import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
width: 100%;
max-width: 1200px;
height: 80vh;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin: 20px auto;
`;
const InputText = styled.textarea`
width: 50%;
height: 100%;
font-size: 16px;
padding: 20px;
border: none;
border-right: 1px solid #e0e0e0;
box-sizing: border-box;
outline: none;
resize: none;
`;
const PreviewContainer = styled.div`
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
`;
const Preview = styled.div`
word-wrap: break-word;
white-space: pre-wrap;
max-width: 100%;
text-align: left;
overflow-y: auto;
flex-grow: 1;
padding-right: 10px;
h1, h2, h3 {
color: #2c3e50;
margin-top: 0;
}
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
`;
const DownloadButton = styled.button`
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
align-self: flex-end;
&:hover {
background-color: #2980b9;
}
`;
function TextToImage() {
const [text, setText] = useState('');
const previewRef = useRef(null);
const formatText = (text) => {
return text
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
.replace(/\n/g, '<br/>');
};
const handleDownload = async () => {
const previewClone = previewRef.current.cloneNode(true);
document.body.appendChild(previewClone);
previewClone.style.position = 'absolute';
previewClone.style.left = '-9999px';
previewClone.style.width = 'auto';
previewClone.style.maxWidth = '800px';
previewClone.style.height = 'auto';
previewClone.style.whiteSpace = 'pre-wrap';
previewClone.style.backgroundColor = 'white';
previewClone.style.padding = '40px';
try {
const html2canvas = (await import('html2canvas')).default;
const canvas = await html2canvas(previewClone, {
backgroundColor: 'white',
scale: 2,
width: previewClone.offsetWidth,
height: previewClone.offsetHeight
});
const link = document.createElement('a');
link.download = 'text_image.png';
link.href = canvas.toDataURL('image/png');
link.click();
} catch (error) {
console.error('Failed to load html2canvas:', error);
} finally {
document.body.removeChild(previewClone);
}
};
return (
<Container>
<InputText
placeholder="输入文本（可包含标题，如# 标题1）"
value={text}
onChange={(e) => setText(e.target.value)}
/>
<PreviewContainer>
<Preview
ref={previewRef}
dangerouslySetInnerHTML={{ __html: formatText(text) }}
/>
<DownloadButton onClick={handleDownload}>导出为图片</DownloadButton>
</PreviewContainer>
</Container>
);
}
export default TextToImage;
\ No newline at end of file
src/js/i18n.js 0 → 100644
View file @ fc56331a
import { useState, useEffect } from 'react';
const i18n = {
zh: {
title: 'AI工具箱',
slogan: '您的智能助手集合，一站式解决各种AI需求。',
searchPlaceholder: '搜索工具...',
tools: {
text2image: {
title: '文字卡片',
description: '将文字转换为图片卡'
},
jsonFormatter: {
title: 'JSON 格式化',
description: '美化和验证 JSON 数据'
},
// 添加更多工具...
},
// 添加更多翻译...
},
en: {
title: 'AI Toolbox',
slogan: 'Your collection of intelligent assistants, solving various AI needs in one place.',
searchPlaceholder: 'Search tools...',
tools: {
text2image: {
title: 'Text to Image Card',
description: 'Convert text to image card'
},
jsonFormatter: {
title: 'JSON Formatter',
description: 'Beautify and validate JSON data'
},
// 添加更多工具...
},
// 添加更多翻译...
},
// 添加更多语言...
};
let currentLanguage = localStorage.getItem('language') || 'zh'; // 从本地存储获取语言设置，默认为中文
let listeners = [];
export function setLanguage(lang) {
if (i18n[lang]) {
currentLanguage = lang;
localStorage.setItem('language', lang); // 将语言设置保存到本地存储
listeners.forEach(listener => listener(currentLanguage));
}
}
export function getLanguage() {
return currentLanguage;
}
export function t(key) {
const keys = key.split('.');
let value = i18n[currentLanguage];
for (const k of keys) {
if (value[k] === undefined) {
return key; // 如果翻译不存在，返回原始 key
}
value = value[k];
}
return value;
}
export function useTranslation() {
const [lang, setLang] = useState(currentLanguage);
useEffect(() => {
const listener = (newLang) => setLang(newLang);
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
};
}, []);
return { t, lang, setLanguage };
}
src/main.jsx 0 → 100644
View file @ fc56331a
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import './styles/main.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
)
src/pages/Home.jsx 0 → 100644
View file @ fc56331a
import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from '../js/i18n';
const tools = [
{ id: 'text2image', icon: 'fa-image', path: '/text2image' },
{ id: 'jsonFormatter', icon: 'fa-code', path: '/json-formatter' },
{ id: 'textTranslation', icon: 'fa-language', path: '/text-translation' },
];
function Home() {
const { t } = useTranslation();
return (
<div>
<section className="hero">
<h1>{t('title')}</h1>
<p className="slogan">{t('slogan')}</p>
</section>
<section className="tools-section">
<div className="tools-grid">
{tools.map(tool => (
<Link to={tool.path} key={tool.id} className="tool-card">
<i className={`fas ${tool.icon} tool-icon`}></i>
<h3 className="tool-title">{t(`tools.${tool.id}.title`)}</h3>
<p className="tool-description">{t(`tools.${tool.id}.description`)}</p>
</Link>
))}
</div>
</section>
</div>
);
}
export default Home;
src/styles/Header.css 0 → 100644
View file @ fc56331a
.no-underline {
text-decoration: none;
color: inherit; /* 这会保持链接颜色与周围文本相同 */
}
.no-underline:hover {
text-decoration: none; /* 确保悬停时也不会出现下划线 */
}
src/styles/main.css 0 → 100644
View file @ fc56331a
:root {
--primary-color: #000;
--secondary-color: #06c;
--background-color: #fff;
--text-color: #1d1d1f;
--card-background: #fbfbfd;
--card-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
margin: 0;
padding: 0;
line-height: 1.47059;
font-weight: 400;
letter-spacing: -0.022em;
}
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrapper {
flex: 1;
padding-top: 2px;
padding-bottom: 30px;
}
header {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: saturate(180%) blur(20px);
padding: 0 5%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: 44px;
display: flex;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.logo {
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-color);
}
main {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 6rem 1rem 4rem;
}
.hero {
text-align: center;
margin-bottom: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 0.1rem 0.1rem;
border-radius: 20px;
color: white;
}
h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
font-weight: 700;
letter-spacing: -0.015em;
}
.slogan {
font-size: 1.8rem;
margin-bottom: 3.5rem;
font-weight: 400;
opacity: 0.9;
}
.search-container {
position: relative;
max-width: 680px;
margin: 0 auto;
}
#tool-search {
width: 100%;
padding: 1.2rem 1.5rem;
font-size: 1.2rem;
border: none;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.2);
color: white;
transition: all 0.3s ease;
}
#tool-search::placeholder {
color: rgba(255, 255, 255, 0.7);
}
#tool-search:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.3);
}
.search-container i {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 1.2rem;
}
.tools-section h2 {
text-align: center;
font-size: 3rem;
margin-bottom: 4rem;
color: var(--primary-color);
font-weight: 700;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 3rem;
}
.tool-card {
background-color: var(--card-background);
border-radius: 20px;
padding: 2.5rem;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
text-align: center;
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.tool-icon {
font-size: 4rem;
color: var(--secondary-color);
margin-bottom: 2rem;
}
.tool-title {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 1rem;
}
.tool-description {
font-size: 1.1rem;
color: #86868b;
line-height: 1.5;
}
footer {
background-color: var(--card-background);
color: #86868b;
text-align: center;
padding: 1.5rem;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.tools-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 3rem;
}
.slogan {
font-size: 1.5rem;
}
}
\ No newline at end of file
vite.config.js 0 → 100644
View file @ fc56331a
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000
}
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment