מעבד תלושי שכר - Claude AI

July 14, 2025 · View on GitHub

מערכת לעיבוד תלושי שכר ישראליים באמצעות בינה מלאכותית של Claude.

🎥 הדגמות

🚀 הדגמה אינטראקטיבית - FLOW מלא

Interactive Demo

🎯 חוויה ויזואלית מלאה:

  • ⚡ Flow מלא ב-4 שלבים עם אנימציות
  • 🧠 מראה איך Claude AI עובד בפועל
  • 📊 תוצאות בזמן אמת עם נתונים אמיתיים
  • 🎨 עיצוב מתקדם ואינטראקטיבי
  • 💻 מושלם להצגות ולהבנת הקונספט

📹 סרטון הדגמה

Demo Video

לחץ כאן לצפייה בסרטון 🎬

הדגמת המערכת בפעולה - העלאת תלוש שכר וקבלת תוצאות מסווגות

🎬 מה תראה בהדגמה:

  • 📄 העלאת קובץ תלוש שכר (PDF)
  • 🤖 עיבוד אוטומטי עם Claude AI
  • 🏷️ סיווג פריטים לקטגוריות: רגיל, שעות נוספות, נסיעות, אחר
  • 📊 הצגת תוצאות מפורטות וסיכום כספי

💡 טיפ: ההדגמה האינטראקטיבית מציגה את התהליך המלא בצורה ויזואלית ומרשימה

תכונות

  • 📄 עיבוד קבצי PDF ותמונות של תלושי שכר (PDF מומלץ לאיכות OCR מעולה!)
  • 🤖 OCR מתקדם עם Claude AI
  • 🏷️ חלוקה אוטומטית ל-4 קטגוריות:
    • רגיל: שכר בסיס, תוספות ותק, השכלה, משפחה
    • שעות נוספות: 125%, 150%, תוספת לילה, שבת
    • נסיעות: קילומטראז', דמי נסיעה, דלק
    • אחר: מענקים, פיצויים, תשלומים חד פעמיים
  • 📊 תצוגה מפורטת של התוצאות
  • 🔐 אבטחת API key מתקדמת

התקנה

  1. הורד את הפרויקט
  2. התקן dependencies לפרונטאנד:
npm install
  1. התקן dependencies לבקאנד:
cd server
npm install
cd ..
  1. הפעל את המערכת:
# אוטומטי (מריץ שני שרתים):
./start.sh

# או ידנית:
# טרמינל 1 - Backend:
cd server && npm start

# טרמינל 2 - Frontend:  
npm start

שימוש

  1. פתח את הדפדפן ב-http://localhost:3000
  2. העלה תלוש שכר (PDF עד 30MB או תמונה עד 5MB)
  3. המתן לעיבוד Claude AI דרך השרת
  4. צפה בתוצאות המחולקות לקטגוריות

מומלץ: השתמש בקבצי PDF לאיכות OCR מעולה! Claude API תומך בקבצי PDF ישירות.

ארכיטקטורה

המערכת בנויה מארבעה רכיבים עיקריים:

🖥️ Frontend (React Client)

  • פורט: 3000
  • טכנולוגיות: React 18, Tailwind CSS, Lucide Icons
  • תפקיד: ממשק משתמש אינטראקטיבי להעלאת תלושים וצפייה בתוצאות
  • קבצים עיקריים:
    • src/App.js - רכיב האפליקציה הראשי
    • src/PayrollProcessor.js - הרכיב המרכזי לעיבוד תלושים
    • src/App.css - עיצוב הממשק
    • public/index.html - דף HTML הבסיסי

🔧 Backend (Express Server)

  • פורט: 3001
  • טכנולוגיות: Node.js, Express, Multer, CORS
  • תפקיד: שרת API המתווך בין הלקוח ל-Claude AI
  • קבצים עיקריים:
    • server/server.js - שרת Express הראשי
    • server/package.json - תלויות השרת
    • server/.env - הגדרות סביבה (API keys)

🤖 Claude AI (OCR Engine)

  • API: Claude 3.5 Sonnet (Anthropic)
  • יכולות:
    • OCR מתקדם לטקסט עברי וערבי
    • עיבוד קבצי PDF ישירות (ללא המרה)
    • ניתוח מבנה תלושי שכר
    • סיווג פריטים לקטגוריות
  • תהליך עיבוד:
    1. קבלת קובץ PDF/תמונה מהלקוח
    2. המרה ל-Base64
    3. שליחה ל-Claude API עם הוראות OCR מפורטות
    4. קבלת תוצאות JSON מסווגות
    5. החזרה ללקוח

📊 אין בסיס נתונים

  • המערכת עובדת ללא בסיס נתונים
  • כל העיבוד מתבצע בזמן אמת
  • הקבצים אינם נשמרים בשרת
  • התוצאות מוצגות ישירות ללקוח

זרימת הנתונים

[Frontend] → [Backend] → [Claude API] → [Backend] → [Frontend]
  1. העלאת קובץ: המשתמש בוחר קובץ PDF/תמונה
  2. המרה: הקובץ מומר ל-Base64 ונשלח לשרת
  3. עיבוד: השרת שולח ל-Claude API עם הוראות OCR מפורטות
  4. ניתוח: Claude מנתח את התלוש ומחזיר JSON מסווג
  5. תצוגה: התוצאות מוצגות למשתמש בממשק מסודר

API Endpoints

POST /api/process-payslip

עיבוד תלוש שכר באמצעות Claude AI

בקשה:

{
  "base64Data": "base64_encoded_file_content",
  "mediaType": "application/pdf" | "image/jpeg" | "image/png",
  "apiKey": "optional_api_key"
}

תגובה:

{
  "employeeInfo": {
    "name": "שם העובד",
    "idNumber": "מספר ת.ז",
    "month": "חודש שנה"
  },
  "categories": {
    "regular": { "total": 0, "items": [] },
    "overtime": { "total": 0, "items": [] },
    "travel": { "total": 0, "items": [] },
    "other": { "total": 0, "items": [] }
  },
  "summary": {
    "totalIncome": 0,
    "netSalary": 0,
    "grossSalary": 0
  }
}

GET /api/health

בדיקת תקינות השרת

תגובה:

{
  "status": "OK",
  "message": "Server is running"
}

API Key

✅ API Key כבר מוגדר!

המפתח כבר מוגדר בקובץ server/.env ומוכן לשימוש.

אופציות נוספות להגדרת API Key:

  1. קובץ סביבה (כבר מוגדר):

    # קובץ server/.env כבר מכיל:
CLAUDE_API_KEY=sk-ant-api03-...

  2. דרך הממשק: אפשר להכניס API key ידנית בממשק האתר

  3. משתנה סביבה:

    export CLAUDE_API_KEY=your_api_key_here

⚠️ הערה חשובה:

  • ה-API key מוגדר ומוכן לשימוש
  • קובץ .env מוגן ב-.gitignore (לא יועלה ל-GitHub)
  • המפתח פעיל ונבדק

מבנה הפרויקט

payroll/
├── src/                              # Frontend React
│   ├── App.js                       # אפליקציה ראשית
│   ├── PayrollProcessor.js          # רכיב עיבוד תלושים
│   ├── App.css                      # עיצוב
│   └── index.js                     # נקודת כניסה
├── server/                           # Backend Express
│   ├── server.js                    # שרת API
│   ├── package.json                 # תלויות שרת
│   └── .env                         # הגדרות סביבה
├── public/                           # קבצים סטטיים
│   └── index.html                  # HTML בסיסי
├── 🎥 הדגמות ומדריכים/              # קבצי הדגמה
│   ├── process_flow_demo.html      # הדגמה אינטראקטיבית
│   ├── windows_setup_guide.html    # מדריך Windows מתקדם
│   ├── interactive_cmd_demo.html   # הדגמת CMD אינטראקטיבית
│   └── Video_demo.mp4              # סרטון הדגמה
├── 📚 תיעוד מתקדם/                  # מסמכי פיתוח
│   ├── BUILD_DEMONSTRATION.md      # תהליך הבנייה
│   ├── DEVELOPMENT_STEPS.md        # שלבי פיתוח
│   ├── PRESENTATION_SLIDES.md      # מצגת מקצועית
│   └── TECHNICAL_DEMO.js           # הדגמה טכנית
├── package.json                     # תלויות frontend
├── setup_windows.bat               # התקנה אוטומטית Windows
├── start.sh                         # סקריפט הפעלה Linux/Mac
├── test_upload.js                  # בדיקת API
├── salary.pdf                      # קובץ דוגמה
└── README.md                       # מסמך זה

קבצים חשובים

  • server/server.js - מכיל את כל לוגיקת השרת וההוראות ל-Claude
  • src/PayrollProcessor.js - הרכיב הראשי של הממשק
  • process_flow_demo.html - הדגמה אינטראקטיבית מרשימה!
  • windows_setup_guide.html - מדריך Windows מתקדם
  • setup_windows.bat - התקנה אוטומטית ל-Windows
  • salary.pdf - קובץ דוגמה לבדיקות

טכנולוגיות

Frontend

  • React 18: ספריית JavaScript לבניית ממשק משתמש
  • Tailwind CSS: framework CSS למראה מודרני
  • Lucide React: איקונים מודרניים
  • Create React App: הגדרת סביבת פיתוח

Backend

  • Node.js: סביבת JavaScript לשרת
  • Express: framework לשרת HTTP
  • Multer: טיפול בהעלאת קבצים
  • CORS: פתרון בעיות Cross-Origin
  • node-fetch: ספרייה לבקשות HTTP
  • dotenv: ניהול משתני סביבה

AI & OCR

  • Claude 3.5 Sonnet API: מנוע OCR מתקדם מ-Anthropic
  • PDF Support: עיבוד ישיר של קבצי PDF
  • Hebrew/Arabic OCR: תמיכה בטקסט דו-כיווני
  • JSON Parsing: ניתוח מובנה של תוצאות

פתרון בעיות

בעיות נפוצות:

  1. שרת לא מגיב על פורט 3001

    # בדוק שהשרת רץ
curl http://localhost:3001/api/health

# אם לא, הפעל את השרת
cd server && npm start

  2. שגיאת API Key

    • ודא שהמפתח נכון בקובץ server/.env
    • או הכנס מפתח דרך הממשק

  3. שגיאת CORS

    • השרת כבר מוגדר עם CORS
    • ודא שהלקוח נמצא על פורט 3000

  4. קובץ גדול מדי

    • PDF: מקסימום 30MB
    • תמונות: מקסימום 5MB

  5. איכות OCR נמוכה

    • השתמש בקבצי PDF במקום תמונות
    • ודא שהטקסט ברור וקריא

תמיכה ותכונות

המערכת תומכת ב:

  • ✅ עברית וערבית
  • ✅ פורמטים שונים של מספרים
  • ✅ זיהוי מבנה תלוש ישראלי סטנדרטי
  • ✅ קבצי PDF עד 30MB (מומלץ!)
  • ✅ תמונות JPG, PNG, GIF, WebP עד 5MB
  • ✅ סיווג אוטומטי ל-4 קטגוריות
  • ✅ ממשק משתמש בעברית
  • ✅ אבטחת API keys
  • ✅ עיבוד בזמן אמת (ללא שמירה)

אבטחה

  • 🔒 API keys מוגנים בקובץ .env
  • 🔒 GitHub push protection למניעת חשיפת secrets
  • 🔒 אין שמירה של קבצים או נתונים בשרת
  • 🔒 כל העיבוד מתבצע בזמן אמת
  • 🔒 תמיכה בהעלאת API key דרך הממשק (לא נשמר)

רישיון

הפרויקט הזה נוצר בעזרת Claude Code - כלי פיתוח AI של Anthropic.

תרומה

רוצה לתרום לפרויקט?

  1. עשה Fork לפרויקט
  2. צור branch חדש (git checkout -b feature/amazing-feature)
  3. עשה commit לשינויים (git commit -m 'Add amazing feature')
  4. עשה push לbranch (git push origin feature/amazing-feature)
  5. פתח Pull Request

יצירת קשר

לשאלות או בעיות, פתח Issue בפרויקט.

🤖 Generated with Claude Code