Spaces:

drdata
/

numbers-to-chinese-cheque

Running

App Files Files Community

drdata commited on Apr 7

Commit

48d4bfd

verified ·

1 Parent(s): f3a9fca

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +406 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Numbers To Chinese Cheque
-emoji: 💻
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: numbers-to-chinese-cheque
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,406 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数字转中文</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .spinner {
+            animation: spin 1s linear infinite;
+        }
+        .toast {
+            transition: all 0.3s ease;
+        }
+        .toast-enter {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        .toast-enter-active {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .toast-exit {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .toast-exit-active {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+        .btn-scale:hover {
+            transform: scale(1.05);
+        }
+        .btn-scale:active {
+            transform: scale(0.98);
+        }
+        .container-shadow {
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .container-shadow:hover {
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        @media (max-width: 640px) {
+            .input-group {
+                flex-direction: column;
+            }
+            .convert-btn {
+                width: 100%;
+                margin-top: 12px;
+                margin-left: 0 !important;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4 dark:bg-gray-800 transition-colors duration-200">
+    <div class="bg-white rounded-xl p-6 w-full max-w-2xl container-shadow transition-all duration-300 dark:bg-gray-700">
+        <h1 class="text-3xl font-bold text-center text-gray-800 mb-6 dark:text-white">数字转中文</h1>
+        <div class="mb-6">
+            <div class="flex input-group">
+                <input
+                    type="text"
+                    id="numberInput"
+                    placeholder="请输入阿拉伯数字"
+                    class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:placeholder-gray-300"
+                    aria-label="输入阿拉伯数字"
+                >
+                <button
+                    id="convertBtn"
+                    class="convert-btn ml-3 px-6 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors duration-200 btn-scale disabled:bg-gray-400 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700"
+                    disabled
+                >
+                    转换
+                </button>
+            </div>
+            <p id="errorText" class="text-red-500 text-sm mt-2 h-5"></p>
+        </div>
+        <div id="resultContainer" class="hidden bg-gray-50 rounded-lg p-5 mb-6 dark:bg-gray-600">
+            <div class="flex items-center justify-between">
+                <p id="chineseResult" class="text-2xl font-semibold text-blue-500 dark:text-blue-300"></p>
+                <button
+                    id="copyBtn"
+                    class="p-2 rounded-full hover:bg-gray-200 transition-colors duration-200 dark:hover:bg-gray-500"
+                    aria-label="复制结果"
+                >
+                    <i class="far fa-copy text-gray-600 dark:text-gray-300"></i>
+                </button>
+            </div>
+        </div>
+        <div class="text-sm text-gray-500 dark:text-gray-300">
+            <p class="mb-2"><i class="fas fa-info-circle mr-2"></i>支持整数、小数和负数转换</p>
+            <p><i class="fas fa-lightbulb mr-2"></i>示例: 1234 → "一千二百三十四", -56.78 → "负五十六元七角八分"</p>
+        </div>
+    </div>
+    <div id="toast" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 hidden">
+        <div class="bg-gray-800 text-white px-4 py-2 rounded-lg flex items-center">
+            <i class="fas fa-check-circle mr-2 text-green-400"></i>
+            <span>已复制!</span>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM elements
+            const numberInput = document.getElementById('numberInput');
+            const convertBtn = document.getElementById('convertBtn');
+            const resultContainer = document.getElementById('resultContainer');
+            const chineseResult = document.getElementById('chineseResult');
+            const copyBtn = document.getElementById('copyBtn');
+            const errorText = document.getElementById('errorText');
+            const toast = document.getElementById('toast');
+            // Character maps
+            const DIGITS = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+            const UNITS = ['', '十', '百', '千'];
+            const GROUP_UNITS = ['', '万', '亿', '兆'];
+            const DECIMAL_UNITS = ['元', '角', '分'];
+            // Validation regex
+            const NUMBER_REGEX = /^-?\d{1,3}(,\d{3})*(\.\d{0,2})?$/;
+            const MAX_NUMBER = 10 ** 16 - 1;
+            const MIN_NUMBER = -(10 ** 16 - 1);
+            // Event listeners
+            numberInput.addEventListener('input', handleInputChange);
+            convertBtn.addEventListener('click', convertNumber);
+            copyBtn.addEventListener('click', copyResult);
+            // Input change handler
+            function handleInputChange(e) {
+                const value = e.target.value;
+                // Format with commas as user types
+                if (value && value !== '-') {
+                    const cursorPos = e.target.selectionStart;
+                    const cleaned = value.replace(/[^\d.-]/g, '');
+                    // Format with commas
+                    let parts = cleaned.split('.');
+                    let integerPart = parts[0].replace(/\D/g, '');
+                    let formatted = '';
+                    if (integerPart) {
+                        // Handle negative numbers
+                        const isNegative = integerPart.startsWith('-');
+                        if (isNegative) integerPart = integerPart.substring(1);
+                        // Add commas every 3 digits
+                        formatted = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                        if (isNegative) formatted = '-' + formatted;
+                    }
+                    // Add decimal part if exists
+                    if (parts.length > 1) {
+                        formatted += '.' + parts[1].replace(/\D/g, '').substring(0, 2);
+                    }
+                    // Update input value
+                    e.target.value = formatted;
+                    // Restore cursor position
+                    const diff = formatted.length - value.length;
+                    e.target.setSelectionRange(cursorPos + diff, cursorPos + diff);
+                }
+                // Validate input
+                validateInput();
+            }
+            // Validate input
+            function validateInput() {
+                const value = numberInput.value.trim();
+                if (!value) {
+                    errorText.textContent = '';
+                    convertBtn.disabled = true;
+                    return;
+                }
+                // Check if valid number format
+                if (!NUMBER_REGEX.test(value)) {
+                    errorText.textContent = '请输入有效数字';
+                    convertBtn.disabled = true;
+                    numberInput.classList.add('border-red-500');
+                    numberInput.classList.remove('border-gray-300');
+                    return;
+                }
+                // Convert to number and check range
+                const num = parseFloat(value.replace(/,/g, ''));
+                if (num > MAX_NUMBER || num < MIN_NUMBER) {
+                    errorText.textContent = `数字必须在 ${MIN_NUMBER} 到 ${MAX_NUMBER} 之间`;
+                    convertBtn.disabled = true;
+                    numberInput.classList.add('border-red-500');
+                    numberInput.classList.remove('border-gray-300');
+                    return;
+                }
+                // Valid input
+                errorText.textContent = '';
+                convertBtn.disabled = false;
+                numberInput.classList.remove('border-red-500');
+                numberInput.classList.add('border-gray-300');
+            }
+            // Convert number to Chinese
+            function convertNumber() {
+                const value = numberInput.value.trim();
+                if (!value) return;
+                // Show loading state
+                convertBtn.innerHTML = '<i class="fas fa-circle-notch spinner mr-2"></i> 转换中...';
+                convertBtn.disabled = true;
+                // Simulate processing delay (in a real app, this would be immediate)
+                setTimeout(() => {
+                    try {
+                        const num = parseFloat(value.replace(/,/g, ''));
+                        const result = numberToChinese(num);
+                        // Display result
+                        chineseResult.textContent = result;
+                        resultContainer.classList.remove('hidden');
+                        // Save to localStorage
+                        localStorage.setItem('lastConversion', JSON.stringify({
+                            number: value,
+                            chinese: result
+                        }));
+                    } catch (error) {
+                        errorText.textContent = '转换出错，请重试';
+                        console.error('Conversion error:', error);
+                    } finally {
+                        // Reset button
+                        convertBtn.innerHTML = '转换';
+                        convertBtn.disabled = false;
+                    }
+                }, 300);
+            }
+            // Core conversion function
+            function numberToChinese(num) {
+                if (isNaN(num)) throw new Error('Invalid number');
+                // Handle zero
+                if (num === 0) return '零元整';
+                // Handle negative numbers
+                let isNegative = false;
+                if (num < 0) {
+                    isNegative = true;
+                    num = Math.abs(num);
+                }
+                // Split into integer and decimal parts
+                const str = num.toString();
+                let [integerPart, decimalPart = ''] = str.split('.');
+                // Process integer part
+                let chineseInteger = '';
+                if (integerPart !== '0') {
+                    // Split into 4-digit groups (right to left)
+                    const groups = [];
+                    let temp = integerPart;
+                    while (temp.length > 0) {
+                        const start = Math.max(0, temp.length - 4);
+                        groups.unshift(temp.substring(start));
+                        temp = temp.substring(0, start);
+                    }
+                    // Convert each group
+                    chineseInteger = groups.map((group, index) => {
+                        const groupUnit = GROUP_UNITS[groups.length - 1 - index];
+                        return convertGroup(group) + groupUnit;
+                    }).join('');
+                    // Remove consecutive zeros
+                    chineseInteger = chineseInteger.replace(/零+/g, '零');
+                    // Remove trailing zero
+                    if (chineseInteger.endsWith('零')) {
+                        chineseInteger = chineseInteger.substring(0, chineseInteger.length - 1);
+                    }
+                    // Add '元' for financial format
+                    chineseInteger += '元';
+                }
+                // Process decimal part
+                let chineseDecimal = '';
+                if (decimalPart) {
+                    // Round to 2 digits
+                    decimalPart = decimalPart.substring(0, 2).padEnd(2, '0');
+                    // Convert each digit
+                    const jiao = decimalPart[0] !== '0' ? DIGITS[parseInt(decimalPart[0])] + DECIMAL_UNITS[1] : '';
+                    const fen = decimalPart[1] !== '0' ? DIGITS[parseInt(decimalPart[1])] + DECIMAL_UNITS[2] : '';
+                    chineseDecimal = jiao + fen;
+                    // Special case: .05 → "五分" not "零元五分"
+                    if (!chineseInteger && chineseDecimal) {
+                        chineseInteger = '';
+                    }
+                } else if (integerPart !== '0') {
+                    // No decimal part but has integer
+                    chineseDecimal = '整';
+                }
+                // Combine parts
+                let result = chineseInteger + chineseDecimal;
+                // Handle special cases
+                if (result.startsWith('一十')) {
+                    result = result.replace('一十', '十');
+                }
+                // Add negative prefix if needed
+                if (isNegative) {
+                    result = '负' + result;
+                }
+                return result;
+            }
+            // Convert a 4-digit group
+            function convertGroup(group) {
+                group = group.padStart(4, '0');
+                let result = '';
+                for (let i = 0; i < 4; i++) {
+                    const digit = parseInt(group[i]);
+                    const unit = UNITS[4 - 1 - i];
+                    if (digit === 0) {
+                        // Only add zero if not leading or consecutive
+                        if (result && !result.endsWith('零')) {
+                            result += DIGITS[0];
+                        }
+                    } else {
+                        result += DIGITS[digit] + unit;
+                    }
+                }
+                // Remove trailing zero
+                if (result.endsWith('零')) {
+                    result = result.substring(0, result.length - 1);
+                }
+                return result;
+            }
+            // Copy result to clipboard
+            function copyResult() {
+                const text = chineseResult.textContent;
+                if (!text) return;
+                navigator.clipboard.writeText(text).then(() => {
+                    showToast();
+                }).catch(err => {
+                    console.error('Failed to copy:', err);
+                });
+            }
+            // Show toast notification
+            function showToast() {
+                toast.classList.remove('hidden');
+                setTimeout(() => {
+                    toast.classList.add('hidden');
+                }, 2000);
+            }
+            // Load last conversion from localStorage
+            function loadLastConversion() {
+                const lastConversion = localStorage.getItem('lastConversion');
+                if (lastConversion) {
+                    try {
+                        const { number, chinese } = JSON.parse(lastConversion);
+                        numberInput.value = number;
+                        chineseResult.textContent = chinese;
+                        resultContainer.classList.remove('hidden');
+                        validateInput();
+                    } catch (e) {
+                        console.error('Failed to load last conversion:', e);
+                    }
+                }
+            }
+            // Initialize
+            loadLastConversion();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=drdata/numbers-to-chinese-cheque" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>